animation-direction属性
定义和用法
animation-direction 属性定义是否应该轮流反向播放动画。默认是 “normal”
如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
默认值： normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animationDirection=“alternate”
语法
animation-direction: normal|alternate;
值 描述
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。
小程序应用
Wxml代码
<view>animation-direction 属性定义是否应该轮流反向播放动画。</view>
<view>normal 默认值。动画应该正常播放。</view>
<view>alternate 动画应该轮流反向播放。</view>
<view class="c01">01</view>
Wxss代码
.c01{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
效果图
欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现