CSS中，transition和animation的用法及区别

happy175

一、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是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。