- A+
所属分类：教程文章
CSS 实现元素动画主要通过 transition 和 @keyframes 配合 animation 属性来完成。这两种方式适用于不同场景，下面分别介绍它们的用法和区别。
使用 transition 实现简单过渡动画
当元素状态发生变化时（比如鼠标悬停），transition 可以让属性变化更平滑。它适合处理简单的状态切换动画。
常用属性包括：
-
transition-property：指定要过渡的 CSS 属性，如
opacity、transform -
transition-duration：动画持续时间，如
0.3s -
transition-timing-function：速度曲线，如
ease-in、linear - transition-delay：延迟多久开始
简写示例：
立即学习“前端免费学习笔记（深入）”；
div {
opacity: 1;
transition: opacity 0.3s ease;
}
div:hover {
opacity: 0.5;
}
这个例子会让 div 在鼠标悬停时，透明度在 0.3 秒内平滑变化。
使用 @keyframes 定义复杂动画
对于更复杂的动画效果，比如循环旋转、弹跳等，需要使用 @keyframes 来定义关键帧。
语法示例：
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
然后通过 animation 属性应用到元素：
div {
animation: slideIn 1s ease-out;
}
支持多个关键帧：
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
animation 常用属性说明
控制动画行为的细节：
- animation-name：对应 @keyframes 的名称
- animation-duration：动画总时长
- animation-timing-function：动画速度曲线
- animation-delay：延迟启动时间
-
animation-iteration-count：播放次数，
infinite表示无限循环 -
animation-direction：播放方向，如
reverse、alternate -
animation-fill-mode：动画外阶段的样式保持，如
forwards
简写示例：
立即学习“前端免费学习笔记（深入）”；
div {
animation: rotateSpin 2s linear infinite alternate forwards;
}
推荐使用 transform 和 opacity 实现高性能动画
不是所有 CSS 属性都适合动画。频繁修改 width、height 或 margin 会导致重排，影响性能。
优先使用：
- transform：位移、缩放、旋转等由 GPU 加速
- opacity：透明度变化效率高
例如实现一个旋转图标：
@keyframes spin {
to { transform: rotate(360deg); }
}
.icon {
animation: spin 1s linear infinite;
}
基本上就这些。transition 适合交互反馈，animation 更适合独立运行的复杂动画。合理使用能提升用户体验又不拖慢页面。
