CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术，以下是它们的详细介绍：
CSS过渡
- 定义：CSS过渡是一种在元素的属性值发生变化时，平滑地从一个状态过渡到另一个状态的效果，它可以让用户界面的交互更加自然和流畅。
- 常用属性
transition-property：指定要过渡的CSS属性，如width（宽度）、height（高度）、color（颜色）等。例如，transition-property: width;表示只对元素的宽度变化进行过渡。transition-duration：设置过渡效果持续的时间，单位为秒（s）或毫秒（ms）。如transition-duration: 0.5s;表示过渡效果将持续0.5秒。transition-timing-function：规定过渡效果的时间曲线，常见的值有ease（默认值，慢速开始，然后变快，最后慢速结束）、linear（匀速过渡）、ease-in（慢速开始）、ease-out（慢速结束）、ease-in-out（慢速开始和结束）等。transition-delay：设置过渡效果开始前的延迟时间，单位同样是秒或毫秒。例如，transition-delay: 0.2s;表示在触发过渡后，延迟0.2秒再开始过渡效果。
- 示例
```css
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease-in-out, background-color 0.3s linear;
}
.box:hover {
width: 200px;
background-color: red;
}
在上述代码中，当鼠标悬停在`.box`元素上时，宽度会在0.5秒内以`ease-in-out`的时间曲线从100px过渡到200px，背景颜色会在0.3秒内匀速从蓝色过渡到红色。
### CSS动画
- **定义**：CSS动画比过渡更强大和灵活，它可以通过关键帧来定义一系列状态，从而实现更复杂的动态效果，能够创建从一个样式到另一个样式的多个过渡阶段。
- **常用属性**
- `animation-name`：指定要应用的动画名称，与`@keyframes`规则中的名称相对应。
- `animation-duration`：设置动画完成一个周期所需要的时间，单位为秒或毫秒。
- `animation-timing-function`：与过渡中的同名属性类似，规定动画的时间曲线。
- `animation-delay`：设置动画开始前的延迟时间。
- `animation-iteration-count`：指定动画的播放次数，可以是具体的数字，也可以是`infinite`（无限循环）。
- `animation-direction`：规定动画是否应该反向播放，取值有`normal`（正常播放）、`reverse`（反向播放）、`alternate`（交替播放，即正向播放一次后再反向播放一次，如此循环）、`alternate-reverse`（与`alternate`相反，先反向播放）。
- **关键帧`@keyframes`**：用于定义动画的具体步骤和状态。例如：
```css
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
上述代码定义了一个名为slideIn的动画，从元素向左偏移自身宽度100%的位置开始，到回到初始位置结束。
- 示例
在这个例子中，.box { width: 100px; height: 100px; background-color: green; animation: slideIn 2s ease-in-out 0.5s infinite alternate; }.box元素应用了slideIn动画，动画持续2秒，以ease-in-out的时间曲线播放，延迟0.5秒开始，无限循环，并且每次交替播放。
过渡和动画的区别
- 触发方式：过渡通常是由元素的状态变化（如
hover、focus等）或JavaScript动态修改属性值触发；动画则可以在页面加载时自动播放，也可以通过JavaScript触发。 - 控制粒度：过渡只能定义起始和结束状态，中间的过渡效果由浏览器自动计算；动画可以通过关键帧精确控制每个阶段的状态，实现更复杂的动画效果。
- 循环性：过渡一般只在状态变化时执行一次；动画可以通过设置
animation-iteration-count属性轻松实现循环播放。
