transition和animation的区别

一、transition（过渡、转变的意思）

transition 属性是一个简写属性，用于设置四个过渡属性：

1. transition-property：设置过渡效果的属性名称（默认值是all）；

2. transition-duration：设置过渡完成所需要的时间（默认值是0）；

3. transition-timing-function：设置过渡速度效果曲线（默认值是ease）；

4. transition-delay：设置过渡的开始时间（默认值是0）；

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

注意：这里transition-duration是必须要填的，不填默认为是0，没有过渡效果。

二、animation（动画、活力的意思）

animation 属性也是一个简写属性，用于设置六个动画属性：

1. animation-name：设置绑定到选择器的@keyframem名称（默认值是none）；

2. animation-duration：设置完成动画所花费的时间（默认值是0）；

3. animation-timing-function：设置动画的速度曲线（默认值是ease）；

4. animation-delay：设置动画延迟几秒开始（默认值是0）；

5. animation-iteration-count：设置动画播放的次数（默认值是1）；

6. animation-direction：设置时候轮流反向播放动画（默认值是normal）；

语法：animation: name duration timing-function delay iteration-count direction;

注意：这里animation-duration是必须要填的，不填默认是0，就不会播放动画了。

三、区别

1. transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；

2. animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。