Требуется что бы при нажатии чек бокса заканчивалась анимация.
То есть, у меня есть код который проигрывает анимацию. И требуется чтобы при нажатии чекбокса анимация завершалась.
<!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;
}
Простой
Простой
