css3动画

animation

动画是css3中具有颠覆性的属 性之一，可以通过设置多个结点来精确的控制一个或多个动画，常用来实现复杂的动画效果。

animation: 动画名称 动画时间 运动曲 线 何时开始 播放次数 是否反向

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-funcion	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

@keyframes 动画名称  {

        from(开始位置) 0%
      to { 结束} 100%
}

animation-iteration-count:infinite: 无限循环播放
anmation-paly-state:paused; 暂停动画

例：

    div {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: go 2s ease 0s infinite alternate;
        /* 引用动画 */
        /* animation: 动画名称 运动曲线 何时开始 播放次数 是否反向 */
    }

    /* @keyframes 动画名称 {} 定义动画 */

    @keyframes go {
        form {
            transform: translateX(0);
        }
        to {
            transform: translateX(300px);
        }
    }

一般情况下，我们就用前两个（ animation go 2s）

例：多组动画

    div {
        width: 100px;
        height: 100px;
        background-color: red;
        /* animation: go 2s ease 0s infinite alternate; */
        animation: go 5s ease 0s;

        /* 引用动画 */
        /* animation: 动画名称 运动曲线 何时开始 播放次数 是否反向 */
    }

    /* @keyframes 动画名称 {} 定义动画 */
    @keyframes go {
        0% {    /* 起始位置 等价于from */
            transform: translate3d(0,0,0);
        }
        25% {
            transform: translate3d(300px,0,0);
        }
        50% {
            transform: translate3d(300px,400px,0);
        }
        75% {
            transform: translate3d(0,400px,0);
        }
        100% {
            transform: translate3d(0,0,0); /* 100%结束位置 等价于to */
        }
    }