前端深入之css篇丨2020年前，彻底掌握css动画【animation】

写在前面

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？

说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。

上一篇文章我们已经一起学习了transition 的使用，如果有不了解的同学可以查看我的上一篇文章。

话不多说，马上和我一起去学习今天的主角animation吧！

animation 语法

值	描述
@keyframes	定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
animation-name	检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-duration	检索或设置对象动画的持续时间
animation-timing-function	检索或设置对象动画的过渡类型
animation-delay	检索或设置对象动画的延迟时间
animation-iteration-count	检索或设置对象动画的循环次数
animation-direction	检索或设置对象动画在循环中是否反向运动
animation-play-state	检索或设置对象动画的状态

animation翻译成中文是动画的意思，熟练运用之后你可以用它来做各种各样炫酷的动画。

@keyframes：定义一个动画，定义的动画名称用来被animation-name所使用。

div{
   
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation:mymove 2s;
}

@keyframes mymove{
   
    0%   {
   width:50px;height:50px;}	
    50%   {
   width:100px;height:100px;}	
    100%   {
   width:50px;height:50px;}
}

@keyframes主要是做关键帧动画的，每个@keyframes后面都要跟一个名字，事例中使用了mymove作为帧动画的名字，然后可以在样式内对关键帧添加样式，然后根据关键帧 @keyframes就能自动形成流畅的动画了。

animation-name：检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

div{
   
    width:50px;
    height:50px;
    background:#f40;
    border-radius