自定义动画css属性

自定义动画：

1.animation-name(自定义动画名称)

元素所应用的动画名称，必须与@keyframes使用，名称由@keyframes定义。

keyframes（动画关键帧）：以@keyframes开头，其中{}所写入的是不同时间段的样式规则。

<style type="text/css">
    .div {     width: 100px;
            　　height: 100px;
            　　background: blue;
            　　animation-name: lefttoright;
         }

    @keyframes lefttoright  {　　　　　　/*定义动画名称为lefttoright*/

　　　　　　　　　from {margin-left:0px;}　　　　　　　　　　　　　　　to {margin-left:300px;}　　　　　　}                </style>

2.animation-duration(动画时间)

<style type="text/css">
.div {     width:100px;
        　　height: 100px;
       　　 background:blue;
        　　animation-name:lefttoright;
        　　animation-duration: 3s;
        }
@keyframes lefttoright {

        from {margin-left: 0}
        to {margin-left: 300px;}
     }    

3.animation-timing-function(动画过渡速度类型)

linear：线性过渡

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

<style type="text/css">
.div {     width: 100px;
        height: 100px;
        background: blue;
        animation-name: lefttoright;
        animation-timing-function:ease-out;   /*由快到慢*/
    }

             @keyframes lefttoright  {

        from {margin-left: 0}
        to {margin-left: 300px;}
        }
</style>    

4.animation-delay:(动画延迟时间)

<style type="text/css">
.div {     width: 100px;
        height: 100px;
        background: blue;
        animation-name: lefttoright;
        animation-timing-function:ease-out;
        animation-delay:2s;
    }

        @keyframes lefttoright  {

        from {margin-left: 0}
        to {margin-left: 300px;}
        }
</style>

5.animation-iteration-count(动画执行次数)

<style type="text/css">
    .div {     width: 100px;
            height: 100px;
            background: blue;
            animation-name: lefttoright;
            animation-timing-function:ease-out;
            animation-delay:2s;
            animation-iteration-count:infinite; 　　 /*无数次*/
         }

            @keyframes lefttoright  {

            from {margin-left: 0}
            to {margin-left: 300px;}

         }
</style>

6.animation-direction(动画顺序)

normal:正常方向

reverse:反方向运动

alternate:先正常运动再反方向运动，并持续交替运动

aiternate-reverse:先反方向运动再正方向，并持续交替运动

<style type="text/css">
.div {     width: 100px;
        height: 100px;
        background: blue;
        animation-name: lefttoright;
        animation-timing-function:ease-out;
        animation-delay:2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;　　　　/*动画先正常运行再反方向运行，并持续交替运行*/
     }

        @keyframes lefttoright  {

        from {margin-left: 0}
        to {margin-left: 300px;}

    }
</style>

7. animation-play-state(动画状态)

<style type="text/css">
.div {     width:100px;
        height: 100px;
        background:blue;
        animation-name:lefttoright;
        animation-duration: 3s;
        animation-timing-function:ease-in;
        animation-delay:2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-fill-mode: forwards;
    }

         .div:hover { animation-play-state:paused; }　　　　/*当鼠标移动到div中，动画暂停*/

         @keyframes lefttoright {

        from {margin-left: 0}
        to {margin-left: 300px;}
    }

</style>

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

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

forwards:设置对象为动画结束时的状态

backwards:设置对象为动画开始时的状态

both:设置对象为动画开始或结束的状态

<style type="text/css">
.div {     width: 100px;
        height: 100px;
        background: blue;
        animation-name: lefttoright;
        animation-timing-function:ease-out;
        animation-delay:2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-fill-mode: forwards;
    }

        @keyframes lefttoright  {

        from {margin-left: 0}
        to {margin-left: 300px;}

     }
</style>

9.animation(动画复合属性)

语法：animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state>

<style type="text/css">
.div{
        width: 100px;
    height: 100px;
    background: blue;
        animation:lefttoright 3s ease-out forwards;
}

    @keyframes lefttoright {

    from {margin-left: 0}
    to {margin-left: 300px;}
}
</style>