Как сделать так, чтобы анимация завершалась при выборе/снятии галочки в чекбоксе на html и css?

Как сделать так, чтобы при нажатии на чекбокс завершалась анимация?
  • 26 сентября 2023 г. 4:27
Ответы на вопрос 1
Для того чтобы анимация завершалась при выборе/снятии галочки в чекбоксе на 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, и т.д.

Похожие вопросы