杭州蓝韵网络｜animation、transition、transform、translate 傻傻分不清

css属性很多，并且有些无论是字母的拼写还是字面上的意思，都容易混淆，比如下图的几个属性，是不是也混淆过你呢

弄清楚这几个问题，我们就可以头脑清醒的状态下去学习css的动画。

transition

什么叫过渡？字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。

语法：transition: property duration timing-function delay;

animation

在官方的介绍上介绍这个属性是transition属性的扩展，弥补了transition的很多不足，我理解为animation是由多个transition的效果叠加，并且可操作性更强，能够做出复杂酷炫的效果(前提是你爱折腾)。

语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;

animation与transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量基于css的动画库，用来取代flash的动画部分。在我的项目中一般用 Animate.css 来设置一些动画，期待在工作中能够用animation完美实现UI设计师给的设计图～