css3动画animation

animation-name:move; 调用动画：

           /* 2.调用动画 */
            animation-name:move;
            animation-duration: 1s;
            /* animation-delay: 2s; */
            /* animation-timing-function: ease-in; */

            /* 动画执行的次数 */
            /* animation-iteration-count: 3; */
            animation-iteration-count: infinite;

            /* 反转反向 */
            /* animation-direction: normal; */
            /* animation-direction: reverse; */
            /* 正向反向交替进行 */
            /* animation-direction: alternate; */
            /* 反向正向交替进行 */
            /* animation-direction: alternate-reverse; */
            animation-play-state:paused;

@keyframes 创建动画：

第一种方式：from & to

        @keyframes move {  
            /* 动画的初始状态 */
            from{
                left:0px;
                top:0;
            }
            to{
                left:300px;
                top:0;
            }
        }

第二种方式：百分比

@keyframes move {  
            /* 与群组选择器一致 */
            0%,100%{
                left:0;
                top:0;
            }
            25%{
                left:300px;
                top:0;
            }
           
            50%{
                top:300px;
                left:300px;
            }
           
            75%{
                left:0;
                top:300px;
            }
        }

animation-name-指定动画名称：

默认 none 规定无动画效果

@keyframes定义动画名称

animation-duratio-定义动画持续的时间：

单位：以秒或毫秒计

默认值为0，需要设置该属性，否则不会播放动画

animation-timing-function-定义动画的时间函数：

linear 匀速

ease 缓动[默认值]。动画以低速开始，然后加快，在结束前变慢。

ease-in 加速——动画以低速开始。

ease-out 减速——动画以低速结束。

ease-in-out 先加速后减速——动画以低速开始和结束。

animation-delay-定义动画开始前等待的时间：

以秒或毫秒计。

默认值是 0

允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)

.box {
    animation-name:move; 
    animation-duration: 5s; 
    animation-timing-function: ease-in; 
    animation-delay: -1s; 
    animation-iteration-count: infinite; 
}

animation-iteration-count-定义动画播放次数：

1【默认值】表示1次

数值 定义动画播放次数

infifinite 规定动画应该无限次播放。

animation-iteration-count: infinite;

animation-direction-定义动画运动的方向：

normal：正常方向

reverse：反方向运行

alternate：正向反向交替—》动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：反向正向交替——》 动画先反运行再正方向运行，并持续交替运行

animation-play-state-动画的执行状态：

running:运动【默认】

paused: 暂停

animation-fifill-mode-设置动画在运动时间之外的状态：

none 默认值

进场之前和动画结束之后都停留在元素的初始状态

forwards 动画结束之后停留在结束帧状态

backwards 动画进场之前停留在初始帧状态

both 以上两者

animation-简写：

语法：

animation: 
动画名字 动画持续时间 动画时间函数 动画延迟时间 动画执行次数 动画的方向 动画的播放状态 填充模式 
默认值：none 0 ease 0 1 normal running none

空格隔开

靠前的时间表示持续时间，靠后时间为延迟时间

多组值

以上每一个属性都允许多组值，【逗号】隔开

简写多组值：【逗号】隔开

.box {
    width:100px; 
    height:100px; 
    background-color: red; 
    position:absolute; 
    left:0;
    top:0;
    /* animation-name:move,changebg; 
    animation-duration: 1s,3s; 
    animation-timing-function: ease-in,linear; */
    animation:move 1s ease-in,changebg 3s linear;
}

/*声明动画*/
@keyframes move { 
    0%,100%{ 
        left:0; 
        top:0; 
    }
    25%{
        left:300px; 
        top:0; 
    }
    50%{
        left:300px; 
        top:300px; 
    }
    75%{
        left:0; 
        top:300px; 
    } 
}

@keyframes changebg { 
    0%{ 
        background-color: red; 
    }
    100%{ 
        background-color: green; 
    } 
}