css3中的animation详解

animation

它是一个动画复合属性，有以下的属性
animation-name ：动画名称
animation-duration ：动画的持续时间
animation-timing-function ：动画的过渡类型，运动函数
animation-delay ：动画延迟的时间
animation-iteration-count ：动画的循环次数
animation-direction：动画在循环中是否反向运动
animation-fill-mode：动画结束后的状态
animation-play-state：动画状态

用法

需要配合@keyframes关键帧使用

举例

@keyframes run{

    /* 0%可以写from */
    0%{
        left: 0;
        top: 0;
    }
    25%{
        left: 100px;
        top: 0px;
    }
    50%{
        left :100px;
        top: 100px;
    }
    75%{
        left: 0;
        top: 100px;
    }
    100%{
        left: 0;
        top: 0;
    }
    /* 100%可以写to */

}

@keyframes run2{
    0%{
        background-color: blue;
    }
    25%{
        background-color: blueviolet;
    }
    50%{
        background-color: cyan;
    }
    75%{
        background-color: darkcyan;
    }
    100%{
        background-color: black;
    }
}

div{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    /* animation: run 5s; 名字 执行时间 */
    /* animation: run 4s, run2 4s; 设置两个动画*/
    /* cubic-bezier()定义的是每一段动画的运动，属于运动函数 */
    /* animation-iteration-count: 2; 动画执行次数 第二次开始就不delay了 */
    /* animation-direction: reverse（倒叙执行）; 执行的顺序 alternate正一次 倒一次*/
    /* animation-play-state: paused; 暂停动画 */
    /* animation-fill-mode: forwards; 动画停下来后 保存最后一帧的状态 
    backwards设置动画开始前为第一帧的状态 */
}
<div></div>

animation-fill-mode:forward;在这里，动画结束后，保持两个动画的最后一帧的状态。

运动函数中的steps()

/steps()步数代表每一段动画的步数 跳转不是流畅的过渡
end 保留当前帧状态，直到动画状态结束
start 保留下一帧状态 直到…
steps(1,end) === step-end
steps(1,start) === step-start
运动函数讲解