transition（过渡）

transform（变换）

animation（动画）

从三个属性就可以知道，tansition是一个过渡属性，就是一个属性从一个值过渡到另一个值，tansform变换，就是一个整体的位置（或整体大小）发生变换，animation动画，就是在一段时间内各种属性进行变化从而达到一个动画的效果。

一、transition（过渡）

W3C中对transition的描述是：css中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。

transition主要包含四个值，transition-property（执行变换的属性），transition-duration（执行变换的持续时间）,transition-timing-function(变换的速率变化模式),transition-delay(变换延迟时间)。

（1）transition-property

这只属性是用来指定元素中哪一个属性执行过渡效果，取值有

none 没有属性需要执行过渡

all 所有属性发生变化（默认值）

indent 元素的某一个属性值

indent的取值覆盖了大部分的css取值，但是自适应的时候，宽度发生变化是不会触发的。

（2）transiton-duration

用来指定元素转换过程的持续时间，单位为s或ms，可以作用域任何元素。默认值为0

（3）transition-timing-function

transition-timing-function允许我们根据时间的推进去改变属性值的变换速率。主要有以下几个取值

ease（逐渐变慢）

linear（匀速）

ease-in（加速）

ease-out（减速）

ease-in-out（加速然后减速）

cubic-bezier（允许自定义一个时间曲线）

（4）transition-delay

用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多唱时间执行transition效果。

当我们想要改变不知一个css属性而是改变多个属性的时候，只要把几个transition的声明串在一起，用逗号分隔开，然后定义各自的效果。

因为transition-duration和transition-delay都是时间值，所以一定要把duration的值放在delay的前面。

transition的连写

transition: