Css3动画 animation 属性介绍以及使用

语法:

animation: 动画名称 动画执行一次所需时间 动画延迟执行时间 动画播放次数 动画执行状态 动画播放后的状态;

eg:

animation: box_ani 10s 2s infinite paused forwards;

1. 动画名称( animation-name )

    eg:

animation: person 1s;

    注: 此处的动画名称要与动画关键帧定义的动画名称一致

2. 动画执行一次所需时间( animation-duration )

    取值:

        正数: 单位为s，设置为0时表示动画不执行

3. 动画延迟执行时间( animation-delay )

    取值:

        0: 不延迟

        正数: 按照延迟的时间执行动画

        负数: 设置时间前的动画被截断

4. 动画播放次数( animation-iteration-count )

    取值:

        number: 正整数值

        infinite: 循环播放

5. 设置对象动画的状态( animation-play-state )

    取值:

        running: 默认值，运动

        paused: 暂停

6. 设置对象动画的类型( animation-timing-function )

    取值:

        ease: 默认值

        linear: 匀速运动

        ease-out: 减速运动

        ease-in-out: 慢-快-慢

        step-start: 马上转跳到动画的结束状态或从一帧到下一帧没有过渡

        step-end: 保持动画的开始状态，直到动画执行结束，马上转跳到动画结束状态

        steps(n,start | end)  n表示动画执行需要分几个阶段

7. 设置对象动画运动的方向( animation-direction )

    取值:

        normal: 正常方向运动

        reverse: 动画反方向运行，始终与normal方向相反

        alternate: 正反方向交替运动，奇数次正方向，偶数次反方向

        alternate-reverse: 奇数次反方向，偶数次正方向

8. 设置对象动画时间之外的状态( animation-fill-mode )

    取值:

        none: 默认值，不设置动画时间之外的状态

        forwards: 保持动画结束时的状态

        backwards: 保持动画开始时的状态

        both: 遵循 forwards 和 backwards 两个规则

动画关键帧

    语法:

@keyframes 动画名称{
    0%{
        属性: 属性值;
    }
    ...
    100%{
        属性: 属性值;
    }
}

上方代码等同于下方

@keyframes 动画名称{
    from{
        属性: 属性值;
    }
    ...
    to{
        属性: 属性值;
    }
}

鹏仔小扩展: 隐藏变形元素的背面，语法如下:

backface-visibility: hidden;

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓