关键帧动画

关键帧动画和过渡动画的区别

        1.关键帧动画的触发时机是,只要添加关键帧动画,就会立即执行动画

        2.关键帧动画可以对动画的流程进行控制

        关键帧动画的使用流程

        1.先封装一组关键帧动画,使用关键字  @keyframes

        2.给需要设置动画的元素,添加动画属性

        设置动画名称

        animation-name: 值是通过@keyframes 声明的名称

        设置动画持续时间

        animation-duration: 10s;

        以上两个属性不能省略

        设置动画的运送函数

        animation-timing-function: 值和过渡函数一致，都是贝塞尔曲线设置的函数

        设置动画的延迟时间

        animation-delay：10s;

        设置动画的重复次数

        animation-iteration-count: num;

        值是一个正整数num，表示次数,默认为1次，也可以是 infinite 表示无限次数

        设置动画的方向

        animation-direction:

        值

            normal 默认值，正方向运行

            reverse  反方向运行

            alternate  当运行次数为奇数时，正方向运行；偶数时，反方向运行

            alternate-reverse 当运行次数为奇数时，反方向运行；偶数时正方向运行

       

        设置动画最后一帧的状态

        animation-fill-mode:  ;

        值：

            forwards  以动画的最后一帧作为动画的最后呈现状态

            both   状态和forwards相同

            backwards 默认值，以动画开始时候的第一帧作为动画的最后呈现状态

       

        合写

        animation: name duration timing-function delay iteration-count direction fill-mode;

        合写的时候，除了 name duration 不能省略，其他均可视情况省略

        控制动画的播放状态

        animation-play-state: ;

            值：

                paused 暂停

                running 运动

            /* 设置动画名称 */
            animation-name: move;
            /* 设置动画持续时间 */
            animation-duration: 2s;
            /* 设置动画的 运动函数 */
            animation-timing-function: ease-in-out;
            /* 设置动画的重复次数 */
            animation-iteration-count: 2;
            /* 设置动画的方向 */
            animation-direction: alternate-reverse;
            /* 设置动画最后一帧的状态 */
            animation-fill-mode: forwards ;
            /* 控制动画的播放状态 */
            animation-play-state: paused;