语法区别
- CSS动画（animation）：
- 语法相对复杂，需定义关键帧（@keyframes）来描述动画每一阶段的状态。例如：
@keyframes example {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.element {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
}
- 可控制动画的每一帧变化，有多个属性用于控制动画的时长、速度曲线、延迟、循环次数等。
- CSS过渡（transition）：
- 语法相对简单，只需指定过渡的属性、时长、延迟和过渡函数。例如：
.element {
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 0s;
}
.element:hover {
width: 200px;
}
- 一般用于元素从一种状态到另一种状态的平滑过渡，通常只定义开始和结束状态。
触发条件区别
- CSS动画（animation）：
- 不需要特定外部触发（如用户交互），页面加载时即可自动播放。也可通过JavaScript动态控制其播放、暂停等。例如，可在点击按钮时，通过JavaScript获取元素并调用
element.style.animationPlayState = 'paused'暂停动画。
- CSS过渡（transition）：
- 通常需要特定触发条件，最常见的是用户交互，如:hover（鼠标悬停）、:focus（元素获得焦点）等伪类。也可通过JavaScript改变元素的类名，从而触发过渡效果。
表现形式区别
- CSS动画（animation）：
- 能实现复杂的动态效果，如循环动画、按顺序执行多个关键帧变化等。比如实现一个元素不断闪烁的动画效果。
- CSS过渡（transition）：
- 主要用于简单的状态变化过渡，强调平滑过渡，如元素的显示/隐藏、大小变化、颜色变化等。像按钮在鼠标悬停时的颜色渐变。
适用场景
- 适合使用动画的场景：
- 加载动画：在页面或组件加载时，显示旋转的加载图标等动画，告知用户系统正在处理任务，提升用户体验。例如页面加载时，一个旋转的加载圈。
- 引导动画：在新用户首次使用产品时，通过动画展示功能引导，帮助用户快速了解产品使用方法。如一个元素按顺序依次移动展示不同功能区域。
- 强调重要信息：当页面出现重要提示或更新内容时，使用动画吸引用户注意力，比如元素闪烁或弹跳。
- 适合使用过渡的场景：
- 按钮交互：按钮在鼠标悬停、按下时，通过过渡实现颜色、大小、透明度等变化，提供视觉反馈，增强交互性。如按钮悬停时背景颜色渐变。
- 菜单展开与收起：导航菜单或下拉菜单在展开和收起时，使用过渡让高度、宽度或透明度等变化更平滑，提升用户体验。
- 元素状态切换：如图片从正常状态到选中状态的样式过渡，比如透明度变化或边框样式变化。
