在 CSS 中，动画效果是提升用户体验的重要手段。 animation 和 transition 是实现 CSS 动画的两种主要方式，但它们在使用方式、功能特点和适用场景上存在明显区别。本文将详细解析这两种动画方式的差异，并通过例子说明它们的使用方法。
1. transition 是什么？
transition 是 CSS3 中引入的属性，用于定义元素从一个状态平滑过渡到另一个状态的效果。它只能在元素状态发生变化时触发，例如鼠标悬停、点击等。
基本语法
transition: property duration timing-function delay;
- property : 要过渡的 CSS 属性（如 width 、 height 、 color 等）
- duration : 过渡效果的持续时间
- timing-function : 过渡效果的时间曲线（如 ease 、 linear 、 ease-in 等）
- delay : 过渡效果的延迟时间
示例
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease 0s;
}
.box:hover {
width: 200px;
}
当鼠标悬停在 .box 元素上时，它的宽度会从 100px 平滑过渡到 200px，持续时间为 1 秒。
2. animation 是什么？
animation 也是 CSS3 中引入的属性，用于定义更复杂的动画效果。它可以在没有用户交互的情况下自动触发，并且可以定义多个关键帧来控制动画的各个阶段。
基本语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- name : 动画名称，对应 @keyframes 定义的动画
- duration : 动画持续时间
- timing-function : 动画时间曲线
- delay : 动画延迟时间
- iteration-count : 动画重复次数
- direction : 动画播放方向（如 normal 、 reverse 、 alternate 等）
- fill-mode : 动画结束后元素的状态
- play-state : 动画播放状态（如 running 、 paused 等）
示例
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s ease 0s infinite alternate;
}
这个例子中， .box 元素会在水平方向上来回移动，动画持续时间为 2 秒，无限重复，并且每次重复时会反向播放。
3. 两者的区别
4. 适用场景
- transition 适用于 ：简单的状态变化，如悬停效果、点击反馈等。例如，按钮悬停时的颜色变化、卡片点击后的缩放效果等。
- animation 适用于 ：复杂的动画效果，如元素的移动、旋转、淡入淡出等。例如，加载动画、页面切换效果、元素的复杂变形等。
浪漫流星雨
当你熟练掌握了animation，你甚至能做出许多有趣的动画，就比如，这个！！！
5. 总结
transition 和 animation 都是 CSS 中实现动画效果的重要手段，但它们在使用方式和功能特点上存在明显区别。
- 如果你只需要实现简单的状态过渡效果，那么 transition 是一个很好的选择，它使用简单，性能也较好。
- 如果你需要实现更复杂的动画效果，那么 animation 会更适合，它提供了更多的控制选项，可以实现更丰富的动画效果。 在实际开发中，我们可以根据具体的需求选择合适的动画方式，甚至可以将两者结合使用，以实现更好的用户体验。
希望本文能帮助你理解 CSS 中 animation 和 transition 的区别，并在实际开发中灵活运用它们！
