CSS中transition与animation的功能与不同

1.transition过渡

transition属性用于指定元素从一个状态到另一个状态时的过渡效果，在给定的时间内平滑而自然地改变属性值。

transition: property duration timing-function delay;

• property: 指定应用过渡效果的CSS属性名称。可以使用all来指定所有可动画的属性。
• duration: 过渡效果的持续时间，例如 1s 或 500ms。
• timing-function: 过渡效果的速度曲线，常用的是linear、ease、ease-in、ease-out 和 ease-in-out。
• delay: 过渡效果开始前的延迟时间，例如 1s。

button {background-color: aquamarine;transition: background-color 0.5s ease;    
}
button:hover {background-color:aqua;
}
/* 所有属性过渡 */
.all-properties {transition: all 0.5s ease 2s;
}

2.animation动画

animation允许通过关键帧来定义动画，可以实现更为复杂和连续的动画效果。

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

• name：@keyframes 名称。
• duration: 过渡效果的持续时间。
• time-function: 动画的速度曲线。常用的是ease、linear、ease-in、ease-out、ease-in-out。
• delay: 动画效果开始前的延迟时间，例如 1s。
• iteration-count: 设置 infinite 动画将永远持续下去或设置自然数字。
• direction: 指定向前播放、向后播放还是交替播放动画。常用的是normal、reverse、alternate、alternate-reverse。
• fill-mode: 在不播放动画时的样式（在开始之前，结束之后，或两者都结束时）,默认值是none。常用的是none、forwards、backwards、both。
• play-state：规定动画是运行还是暂停。默认值是running。常用的是running、paused。

/* 定义关键帧 */ 
@keyframes expand {0% { transform: scale(1); }100% { transform: scale(1.5); }
}/* 应用动画 */
.animated-box {width: 300px;line-height: 30px;background-color: rgb(0, 255, 145);animation: expand 2s ease-in-out 1s infinite alternate;
}

3.不同之处

• 目的：transition 主要用于处理元素状态的过渡，animation用于创建更为复杂和连续的动画效果。
• 使用场景：transition适用于简单的显示/隐藏动画，animation适用于需要精确控制的复杂动画序列。
• 控制程度：animation提供了更多的动画控制选项，如动画的播放状态、速度曲线等。