前端深刻之css篇丨2020年前，完全掌握css动画【transition】

写在前面

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

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

话很少说，立刻和我一块儿去学习今天的主角transition吧！

transition 语法

值	描述
transition-duration	transition效果须要指定多少秒或毫秒才能完成
transition-property	指定CSS属性的name，transition效果
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

transition翻译成中文是过渡的意思，顾名思义，它就是专门作过渡动画的，好比一些放大缩小，隐藏显示等，下面咱们一块儿来学习一下他的语法。

transition-duration：transition效果须要指定多少秒或毫秒才能完成

div{ width:100px; height:100px; border-radius: 50%; background:#f40; transition-duration:1s; } div:hover{ height:150px; width:150px; } 复制代码

这是transition最基本的用法，transition-duration为动画执行所需的时间，这段代码的意思就是鼠标移入，div的宽高就会都变成150px

transition-property：指定CSS属性的name，transition效果

div{ width:100px; height:100px; border-radius: 50%; background:#f40; transition-duration:1s; transition-property:width; } div:hover{ height:150px; width:150px; } 复制代码

这里transition-property值仅为width，意思是只给width加动画，因此会呈现这种效果，一样若是换成了height，那么将会是变高才有动画。

咱们发现，第一个案例咱们并无写transition-property，可是案例中width和height属性是同时变化的，那是由于transition-property的默认值为all，只要不写这个属性，那就是所有变化都会执行动画。

transition-timing-function：指定transition效果的转速曲线

div{ width:100px; height:50px; background:#f40; transition-duration:2s; transition-timing-function:ease-in-out; } div:hover{ width:250px; } 复制代码

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

值	描述	速度
linear（默认属性）	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。	匀速
ease	规定慢速开始，而后变快，而后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。	快-慢-慢
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。	快-快
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。	慢-慢
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。	慢-快-慢
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义本身的值。可能的值是 0 至 1 之间的数值。	自定义

transition-delay：定义transition效果开始的时候

div{ width:100px; height:100px; border-radius: 50%; background:#f40; transition-duration:1s; transition-delay:1s; } div:hover{ height:150px; width:150px; } 复制代码

这里transition-delay的值为1s，意思是动画将在延迟一秒后执行。

---

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

transition: property duration timing-function delay;

div{ transition:all 1s ease-in-out 2s; } 复制代码

那么这里的意思就是全部属性都加入持续一秒，缓进缓出的动画，并在两秒钟后开始执行。

结论

通过以上的学习，相信你已经初步了解了transition的用法，transition用来过渡再好不过了，可是仅靠它作不了一些炫酷的动画，我将在接下来的文章继续为你讲解animation（动画）、translate（移动）以及transform（变形），跟进个人脚步吧，跟我一块儿在2020年前掌握css动画！

结语

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

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

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

前端路漫，踩坑不断。

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

以上2019-10-16。