主要使用CSS animation-play-state 属性来控制
定义和用法
animation-play-state 属性规定动画正在运行还是暂停。
注释:您可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。
默认值: | running |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationPlayState=”paused” |
语法
animation-play-state: paused|running;
值 | 描述 |
---|---|
paused | 规定动画已暂停。 |
running | 规定动画正在播放。 |
实 例:
.left-Poster{
background-color: #0077AA;
width: 40px;
height: 40px;
margin: 1rem;
border-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
-webkit-animation: round_animate 5s linear infinite;
animation: round_animate 5s linear infinite;
}
.left-Poster-animationPaused{
animation-play-state: paused;
}
.left-Poster-animationRunning{
animation-play-state: running;
}
@keyframes round_animate {
to {
transform: rotate(1turn);
}
}