Как закончит анимацию при нажатии чекбокса на html, css?
Требуется что бы при нажатии чек бокса заканчивалась анимация.
То есть, у меня есть код который проигрывает анимацию. И требуется чтобы при нажатии чекбокса анимация завершалась.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hunting</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="map"> <input id="duck1" type="checkbox"> <label class="duck duck1" for="duck1"></label> <div class="count"></div> </div> </body> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hunting</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="map"> <input id="duck1" type="checkbox"> <label class="duck duck1" for="duck1"></label> <div class="count"></div> </div> </body>
* { margin: 0; padding: 0; } @keyframes duckFly1 { 0% { left: -60%; top: 50%; } 25% { left: 25%; top: 20%; } 50% { left: 50%; top: 70%; } 75% { left: 75%; top: 40%; } 100% { left: 100%; top: 60%; } } .map { background-image: url(https://cdn.discordapp.com/attachments/689536359412793454/1155274570505404486/BackGround.png); height: 100vh; background-position: bottom; } input[type="checkbox"] { visibility: hidden; left: -99999px; z-index: -5; } .duck { width: 100px; height: 100px; background-image: url(https://cdn.discordapp.com/attachments/689536359412793454/1155776987491749918/Duck.gif); display: block; position: absolute; left: -60px; opacity: 1; } input[type="checkbox"]:checked { counter-increment: score; } input[type="checkbox"]:checked + .duck { opacity: 0; animation: duckFly1; } .count::after { content: counter(score); position: absolute; left: 50%; bottom: 32px; color: black; font-size: 48px; font-weight: bold; } .duck1 { animation: duckFly1 15s linear 0s 1 normal; } |
* { margin: 0; padding: 0; } @keyframes duckFly1 { 0% { left: -60%; top: 50%; } 25% { left: 25%; top: 20%; } 50% { left: 50%; top: 70%; } 75% { left: 75%; top: 40%; } 100% { left: 100%; top: 60%; } } .map { background-image: url(https://cdn.discordapp.com/attachments/689536359412793454/1155274570505404486/BackGround.png); height: 100vh; background-position: bottom; } input[type="checkbox"] { visibility: hidden; left: -99999px; z-index: -5; } .duck { width: 100px; height: 100px; background-image: url(https://cdn.discordapp.com/attachments/689536359412793454/1155776987491749918/Duck.gif); display: block; position: absolute; left: -60px; opacity: 1; } input[type="checkbox"]:checked { counter-increment: score; } input[type="checkbox"]:checked + .duck { opacity: 0; animation: duckFly1; } .count::after { content: counter(score); position: absolute; left: 50%; bottom: 32px; color: black; font-size: 48px; font-weight: bold; } .duck1 { animation: duckFly1 15s linear 0s 1 normal; }
Дополнительно:
Что значит "завершалась"? Останавливалась на текущем положении или переходила моментально в конечное состояние?
https://developer.mozilla.org/en-US/docs/Web/API/E...
И дальше на нужной анимации вызывать метод .pause()
https://developer.mozilla.org/en-US/docs/Web/API/A...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы завершить анимацию при нажатии на чекбокс на HTML и CSS, можно использовать псевдо-элемент :checked в комбинации с атрибутом checked в HTML и ключевыми кадрами анимации в CSS.
Прежде всего, создайте чекбокс в HTML с атрибутом checked:
```html
```
Затем, используйте следующий CSS для создания анимации и завершения ее при нажатии на чекбокс:
```css
#myCheckbox {
display: none;
}
label {
display: block;
width: 100px;
height: 100px;
background-color: lightblue;
transition: transform 0.3s;
}
#myCheckbox:checked + label {
transform: scale(1.5);
}
```
В этом примере, при нажатии на чекбокс, анимация изменения масштаба элемента label на 1.5 раза будет происходить за 0.3 секунды. Когда чекбокс снова отжимается, анимация завершится и элемент вернется к исходному размеру.
Таким образом, вы можете легко добавить и завершить анимацию при нажатии на чекбокс на HTML и CSS.