Для того чтобы анимация завершалась при выборе/снятии галочки в чекбоксе на HTML и CSS, вы можете использовать псевдокласс :checked и анимацию на свойстве transform.
1. HTML:
```html
<input type="checkbox" id="myCheckbox">
<label for="myCheckbox"></label>
```
2. CSS:
```css
input[type="checkbox"] {
display: none;
}
label {
display: inline-block;
width: 25px;
height: 25px;
background-color: gray;
transition: transform 0.3s ease-in-out;
}
input[type="checkbox"]:checked + label {
transform: rotate(45deg);
}
```
В этом примере, при выборе чекбокса, метка будет вращаться на 45 градусов.
Для других анимаций, вы можете изменить значение свойства transform на нужное вам значение, например, translateX, translateY, scale, и т.д.