前端深刻之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:50%;
    animation-name:mymove;
    animation-duration:2s;
}

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

 

在animation-name使用以前，咱们已经定义了一个名为mymove的帧动画，这里把帧动画的名字做为了animation-name的值，含义是当前元素将执行所设置的帧动画。

animation-duration：检索或设置对象动画的持续时间

继续看上一个案例，仅仅有帧动画和须要执行的动画名称是不足以造成动画的，咱们还须要设置一个动画执行所须要的时间，这里就用到了animation-duration属性，因此上一案例所展现的时间为两秒钟执行一次。

animation-timing-function：检索或设置对象动画的过渡类型

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:3s;
    animation-timing-function:ease-in-out;
}
@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}

 

animation-timing-function的做用就是改变更画在每一帧的快慢。这里transition-timing-function仅展现值为ease-in-out的动画效果，能够理解为慢-快-慢。其余的不作展现，能够参考下表进行理解。

值	描述
linear	动画从头至尾的速度是相同的。
ease	默认。动画以低速开始，而后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中本身的值。可能的值是从 0 到 1 的数值。

animation-delay：检索或设置对象动画的延迟时间

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

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

 

这里animation-delay的值为2s，意思是动画将在延迟两秒秒后延迟执行。

animation-iteration-count：检索或设置对象动画的循环次数

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

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

 

这里animation-iteration-count的值为infinite，意思是动画将会无限次的执行，这也就达到了循环的效果，固然你还能够给它具体的数值，当执行你设置的次数后它会自动中止。

animation-direction：检索或设置对象动画在循环中是否反向运动

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}

@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}

 

这里animation-direction的值为alternate，表明动画将会来回的反复执行，他还有其它属性，在下表给出供小伙伴们本身尝试。

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（一、三、5...）正向播放，在偶数次（二、四、6...）反向播放。
alternate-reverse	动画在奇数次（一、三、5...）反向播放，在偶数次（二、四、6...）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

animation-play-state：检索或设置对象动画的状态

<style>
div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes mymove{
    0%   {width:50px;height:50px;}    
    50%   {width:100px;height:100px;}    
    100%   {width:50px;height:50px;}
}
</style>
<body>
    <button onclick="pause()">暂停</button>
    <button onclick="run()">恢复</button>
    <div></div>
</body>

 

function pause(){
    document.querySelector('div').style.animationPlayState="paused"
}
function run(){
    document.querySelector('div').style.animationPlayState="running"
}

 

animation-play-state的默认值为running，就是动画执行的意思，在实际应用中咱们常用js来操做这个属性，从而控制动画的播放和暂停。

---

今天咱们一共学习了八个属性值，他们都是属于animation属性的，这里给出属性值在animation中的简写方式。

animation: name duration timing-function delay iteration-count direction play-state;

div{ animation:mymove 2s ease-in-out 3s infinite alternate running; } 

那么这里的意思就是mymove动画将在三秒钟后开始，以两秒一个循环慢-快-慢方式，进行动画的展现，而且每次动画事后都会向相反方向执行动画。

结论

通过以上的学习，相信你已经初步了解了animation的用法，随着你对animation的深刻理解，是能够作一些有创造性的动画的，你能够看看本身以前用js写的各类动画，尝试着用咱们两篇文章所学的内容进行修改，相信你必定会对这两个属性有更深的理解。

可是如今咱们只是学会了过渡和动画，咱们如今还不能对图形进行一系列的不规则操做，而transform（变形）就是来操做改变成特殊图形的，我将在接下来的文章继续为你讲解translate（移动）以及transform（变形），跟进个人脚步吧，跟我一块儿在2020年前掌握css动画！

结语

以上就是本文章的所有内容了，若是有不正确的地方欢迎指正。

感谢您的阅读，若是感受有用不妨点赞/转发。

前端深刻系列是一个踩坑系列，是由我本人对工做和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。

前端路漫，踩坑不断。

前端深刻系列持续更新中……

以上2019-10-21。