2016-11-15 169 views
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>

回答

2

它不可能没有JS。 你可以用CSS做的是,动画将通过取消选中该复选框被暂停,如果你再勾选继续:

#toggle:checked ~ #jumping-div { 
    animation-play-state:running; 
} 

#jumping-div { 
    animation-play-state:paused; 
    animation-name: jump; 
    animation-duration: 2.0s; 
    animation-iteration-count: infinite; 
} 

如果你想完成的动画,你可以使用与JS,这是该解决方案这里讨论: Stopping a CSS animation but letting its current iteration finish