微信小程序动画专题课程-通过wxss(css)来实现-第9课-animation-direction属性

animation-direction: normal|alternate;

<view>animation-direction 属性定义是否应该轮流反向播放动画。</view>

<view>normal 默认值。动画应该正常播放。</view>

<view>alternate       动画应该轮流反向播放。</view>

<view class="c01">01</view>

.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;}

}