2
当复选框被选中时,div
正在跳跃。当您取消选中复选框时,div
会立即移至初始位置。平滑动画停止
是否可以顺利地完成最后一个动画迭代,并且在仅使用没有JS的CSS之后停止?
#jumping-div {
width: 100px;
height: 100px;
margin-top: 100px;
background-color: red;
}
@keyframes jump {
0% {
transform: scaleY(1) translateY(0);
}
50% {
transform: scaleY(0.8) translateY(-70%);
}
}
#toggle:checked ~ #jumping-div {
animation-name: jump;
animation-duration: 2.0s;
animation-iteration-count: infinite;
}
<input type="checkbox" id="toggle"><label for="toggle">jump</label>
<div id="jumping-div"></div>