CSS过渡和动画有什么区别_transition与keyframes比较

transition需状态变化触发，如:hover；@keyframes动画可自动播放。2. transition仅控制起止状态，中间过程由浏览器计算；@keyframes通过0%、50%、100%等关键帧精确控制每一阶段样式。3. transition默认单次执行，反向过渡依赖属性变化，不支持循环；@keyframes可通过animation-iteration-count设置重复次数，支持infinite循环和方向控制。4. 简单交互效果如按钮悬停用transition更高效；复杂动画如加载动效、人物行走需@keyframes定义多帧序列。transition适用于状态间往返过渡，@keyframes适合独立、自控的动画流程。

CSS过渡（transition）和动画（@keyframes）都能实现元素的视觉变化，但它们在使用方式、控制能力和适用场景上有明显区别。

1. 触发方式不同：是否需要用户交互

transition 依赖状态变化来触发，比如鼠标悬停（:hover）、焦点（:focus）或类名切换。只有当属性值发生变化时，过渡才会开始。

@keyframes 定义的动画可以自动运行，不需要用户交互。通过 animation-name 和 animation-duration 等属性控制播放时机。

2. 控制精细度：关键帧 vs 起止状态

transition 只能定义属性从一个状态到另一个状态的变化过程，比如从 opacity: 0 到 opacity: 1。中间过程由浏览器自动计算，无法精确控制中间点。

立即学习“前端免费学习笔记（深入）”；

@keyframes 允许你设置多个关键帧（如 0%, 50%, 100%），精确控制每一阶段的样式，适合复杂动画，比如旋转、位移、缩放组合效果。

清程爱画

AI图像与视频生成平台，拥有超丰富的工作流社区和多种图像生成模式。

170

查看详情

3. 执行次数与流程控制

transition 默认只在属性变化时执行一次，反向变化也可以有过渡，但不能设定重复次数或延迟循环。

@keyframes 动画可通过 animation-iteration-count 设置重复次数，用 animation-direction 控制方向，支持无限循环（infinite）等高级行为。

4. 使用场景建议

选择哪个取决于需求：

• 做按钮悬停、菜单展开这类简单状态变化，用 transition 更轻量、性能好。
• 要做加载动画、行走人物、复杂路径运动，必须用 @keyframes 来定义详细帧序列。

基本上就这些。transition 适合“有来有回”的状态过渡，keyframes 适合“自成一套”的独立动画。不复杂但容易忽略的是触发机制——transition 等着别人变，keyframes 自己决定什么时候动。

以上就是CSS过渡和动画有什么区别_transition与keyframes比较的详细内容，更多请关注php中文网其它相关文章！