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

缺乏、安全感 2024-02-19 16:12 7阅读 0赞

### animation-direction属性 ###

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

定义和用法  
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)来实现-animation-direction属性][-_wxss_css_-animation-direction]  
[欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现][-_wxss_css]

![微信小程序动画课程-通过wxss(css)来实现-animation-direction属性][-_wxss_css_-animation-direction 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-animation-direction]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/25c739a3c2094482bc4c106a83178c50.png
[-_wxss_css]: https://ke.qq.com/course/370983?tuin=2b10d56
[-_wxss_css_-animation-direction 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/abc7fbba4d0541aca7aa420b30a6fe95.png