CSS篇之动画（2）

animation-name（自定义动画）

name为动画名称。不要用中文，尽量用与动画相关的名称。元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。简单理解@keyframes它就是关联，如果你不用@kedyframes里面的效果套用到你要的动画里面，你的动画就是一个不会动的图片。

div{
    -webkit-animation-name：fromofright；（加了兼容前缀只适用）
        ainmation-name：fromofright；
}

keyframes（关键帧）

关键帧相当于一个会运动的画面它们其实是有一个一个画面不停地在播放的速度形成的一个画面给人来动感的一组图片。而关键帧就是锁定这些图片的重要属性。

帧数越多画面越流畅。

@-webkit-keyframes 动画名{
        from{
            left：0px；
}
to{
        left：400px；
}
}

百分号写法

@-webkit-keyframes 动画名{
    0%{
    left：0px；
}
50%{
        left：100px；
}
100%{
left：0px；
}
}

注意百分号的写法开头开始关键帧必须为0%，结束必须为100%

animation-time（动画时间）

动画时间理解为一个完整动画所用的时长是多少这就是这个动画的时间。

div{
        -webkit-animation-time：1s；
}

结合上面三个知识点我做出了一个普通图片位移的效果然后回归到原位的效果。

正常动画

附上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正常动画</title>
        <style type="text/css">
            .img{
                width: 50px;
                height: 50px;
                background: green;
                border-radius: 6px;
                -webkit-animation-name:yidong ;
                -webkit-animation-duration:5s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }
            
            @-webkit-keyframes yidong{
                from{
                    margin-left:0px;
                }
                to{
                    margin-left:200px
                }
            }
        </style>
    </head>
    <body>
        <div class="img"></div>
    </body>
</html>

animation-timing-function（动画过渡速度）

ease：逐渐变慢，（默认属性）等于ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

正常动画

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正常动画</title>
        <style type="text/css">
            .img2{
                width: 50px;
                height: 50px;
                background: green;
                border-radius: 6px;
                -webkit-animation-name:yidong ;
                -webkit-animation-duration:4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }
            
            @-webkit-keyframes yidong{
                from{
                    margin-left:0px;
                }
                to{
                    margin-left:350px
                }
            }
        </style>
    </head>
    <body>
        <div class="img2"></div>
    </body>
</html>

linear ：匀速，linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。

线性过渡

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>线性过渡</title>
        <style type="text/css">
            .img3{
                width: 50px;
                height: 50px;
                background: yellow;
                border-radius: 5px;
                -webkit-animation-name:xianxing;
                -webkit-animation-timing-function: linear;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }
            
            @-webkit-keyframes xianxing{
                from{
                    margin-left:0px ;
                }
                to{
                    margin-left:350px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="img3"></div>
    </body>
</html>

ease-in ：加速，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。

加速动画

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>加速动画</title>
        <style type="text/css">
            .img4{
                width:50px;
                height:50px;
                background: dodgerblue;
                border-radius: 5px;
                -webkit-animation-name: jiasu;
                -webkit-animation-timing-function:ease-in;
                -webkit-animation-duration: 4s;                
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }
            
            @-webkit-keyframes jiasu{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: 350px;
                }
            }
        </style>
    </head>
    <body>
        <div class="img4"></div>
    </body>
</html>

ease-out ：减速，ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)。

减速

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>减速</title>
        <style type="text/css">
            .img5{
                width: 50px;
                height: 50px;
                background: lightcoral;
                border-radius: 5px;
                -webkit-animation-name:jiansu;
                -webkit-animation-timing-function: ease-out;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }
            
            @-webkit-keyframes jiansu{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: 350px;
                }
            }
        </style>
    </head>
    <body>
        <div class="img5"></div>
    </body>
</html>

ease-in-out：先加速后减速，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。

先加速后减速

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>先加速后减速</title>
        <style type="text/css">
            .img6{
                width: 50px;
                height: 50px;
                background: gold;
                border-radius: 5px;
                -webkit-animation-name:xian ;
                -webkit-animation-timing-function: ease-in-out ;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }
            
            @-webkit-keyframes xian{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: 350px;
                }
            }
        </style>
    </head>
    <body>
        <div class="img6"></div>
    </body>
</html>

animation-delay（动画延迟时间）

本来是一个1秒钟播放的动画，我想弄成1秒后再播放，这就是动画延迟。

div{
        -webkit-animation-delay：1s / 可以添加动画过渡速度的值；
}

继续用上面动画过渡速度例子添加延迟播放时间（请刷新观看）

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .img7{
                width: 50px;
                height: 50px;
                background: green;
                border-radius: 5px;
                -webkit-animation-name: yanchi;
                -webkit-animation-duration: 4s;
                -webkit-animation-delay: 2s;
            }
            
            @-webkit-keyframes yanchi{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left:350px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="img7"></div>
    </body>
</html>

animation-ieration-count（动画播放次数）

写法：animation-ieration-count：次数用数字/infinite(循环播放播放N次)

例子都用到了此属性

animation-direction（动画顺序）

设置动画播放方向

normal：正常方向（默认）

reverse：反方向运行

alternate：动画线正常运行在反方向运行，并持续交替运行

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

div{
    -webkit-animation-direction：normal；
        animation-direction：normal；
}

例子

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .one{
                width: 100px;
                height: 100px;
                background: yellow;
                margin: 5px;
                -webkit-animation-name: leftofright2;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: infinite;
                
            }
            /*可以直接用于元素属性里面*/
            .reverse{
                -webkit-animation-direction: reverse;
                background: black;
            }
            
            .alternate{
                -webkit-animation-direction: alternate;
                background: blue;
            }
            
            .alternate-reverse{
                -webkit-animation-direction: alternate-reverse;
                background: blueviolet;
            }
        
            
            @-webkit-keyframes leftofright2{
                from{
                    margin-left:0 ;
                }
                to{
                    margin-left:400px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="one reverse"></div>
        <div class="one alternate"></div>
        <div class="one alternate-reverse"></div>
    </body>
</html>

animation-play-state（动画的状态）

animation-play-state：running|paused

running：运动

paused：暂停

div：hover{
    -webkit-animation-play-state：paused；
animation-play-state：paused；
}

鼠标移动到背景上将停止动画播放

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .yi{
                width: 100px;
                height: 100px;
                background: bisque;
                margin: 5px;
                -webkit-animation-name: dong;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: infinite;
            }
            
            .yi:hover{
                -webkit-animation-play-state: paused;
            }
            
            @-webkit-keyframes dong{
                from{
                    margin-left:0 ;
                }
                to{
                    margin-left:400px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="yi"></div>
    </body>
</html>

animation-fill-mode（动画时间之外的状态=动画播完后动画显示是怎么样）

animation-fill-mode：none|forwards|backwards|both

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

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

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

both：设置对象状态为动画结束后开始的状态

div{
    -webkit-animation-fill-mode：both；
         animation-fill-mode：both；
}

animation（动画符合属性）

div{

-webkit-animation:动画名字动画时长动画过渡速度动画时间外的状态

}