微信小程序动画课程-通过wxss(css)来实现-animation-play-state属性
animation-play-state属性
定义和用法
animation-play-state 属性规定动画正在运行还是暂停。默认是 “running”
注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
默认值： running
继承性： no
版本： CSS3
JavaScript 语法： object.style.animationPlayState=“paused”
语法
animation-play-state: paused|running;
值 描述
paused 规定动画已暂停。
running 规定动画正在播放。
小程序应用
Wxml代码
<view>animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。</view>
<view>paused 规定动画已暂停。</view>
<view>running 规定动画正在播放。</view>
<view class='c01'>01</view>
Wxss代码
.c01{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:paused;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
效果图