微信小程序动画课程-通过wxss(css)来实现-animation-play-state属性

animation-play-state属性

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

定义和用法
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;}
}

效果图

欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现