transition og animation
Jeg vil gerne have en div til at stå og "hoppe", hvilket animationen sørger for, men når man klikker på div, så skal animationen pause og transition gøre height højere.Det ser ud til at transition konflikter med animation.
Kan nogen forklare hvorfor og evt foreslå en løsning?
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: block;
width: 100px;
height: 100px;
background-color: red;
-web-transition: height 0.5s;
-web-transition-delay: 0.5s;
transition: height 0.5s;
transition-delay: 0.5s;
animation-name: aabningstider;
animation-duration: 2.0s;
animation-iteration-count: infinite;
-web-animation-name: aabningstider;
-web-animation-duration: 2.0s;
-web-animation-iteration-count: infinite;
}
@keyframes aabningstider {
0% {height: 100px;}
10% {height: 102px;}
20% {height: 100px;}
}
@-web-keyframes aabningstider {
0% {height: 100px;}
10% {height: 102px;}
20% {height: 100px;}
}
#box:checked + label {
animation-play-state: paused;
-web-animation-play-state: paused;
height: 210px;
}
</style>
</head>
<body>
<input type="checkbox" id="box">
<label for="box"></label>
</body>
</html>
