CSS动画是什么_keyframes与animation属性核心概念解析

@keyframes定义动画关键帧，animation应用并控制动画效果，二者结合实现无需JavaScript的流畅CSS动画。

CSS动画让网页元素能够平滑地从一种样式过渡到另一种样式，无需依赖JavaScript或Flash。它通过@keyframes和animation属性实现，是现代前端开发中提升用户体验的重要手段。

什么是 @keyframes 规则

@keyframes 是定义动画关键帧的核心规则，用来描述动画过程中某个时间点的样式状态。浏览器会自动在这些关键帧之间进行插值，生成流畅的中间过渡效果。

你可以把它理解为“动画剧本”，告诉元素在0%、50%、100%等时间节点应该呈现什么样子。

@keyframes slideIn {<br>
  0% { transform: translateX(-100px); opacity: 0; }<br>
  100% { transform: translateX(0); opacity: 1; }<br>
}

上面代码定义了一个名为 slideIn 的动画：元素从左侧100px外、透明状态，移动到原始位置并完全显示。

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

animation 属性详解

animation 属性用于将 @keyframes 定义的动画应用到具体元素上。它可以拆分为多个子属性，控制动画的运行方式。

常用子属性包括：

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

• animation-name：指定 @keyframes 定义的动画名称，如 slideIn
• animation-duration：动画持续时间，单位为秒（s）或毫秒（ms），如 2s
• animation-timing-function：控制动画速度曲线，常用值有 ease、linear、ease-in-out
• animation-delay：动画延迟执行的时间
• animation-iteration-count：动画播放次数，可设为 infinite 实现无限循环
• animation-direction：播放方向，如 reverse、alternate（来回播放）
• animation-fill-mode：控制动画之外的状态，如 forwards 保持最后一帧
• animation-play-state：控制播放或暂停，可用于交互场景

animation: slideIn 2s ease-in-out 0.5s infinite alternate forwards;

这一行代码同时设置了动画名称、时长、缓动函数、延迟、循环次数、方向和结束状态。

实际应用场景与技巧

CSS动画适合用在按钮悬停、加载提示、页面入场动效等轻量级交互中。

一些实用建议：

• 使用 transform 和 opacity 实现高性能动画，避免频繁触发重排（reflow）
• 结合 :hover、@media 等实现响应式动效
• 命名关键帧时使用语义化名称，如 fadeIn、rotateSpin
• 调试时可通过设置 animation-play-state: paused 暂停动画查看中间状态

基本上就这些。掌握 @keyframes 和 animation 的配合使用，就能在不写一行 JavaScript 的情况下，实现大多数常见的视觉动效。关键是理解“定义”与“应用”的分离逻辑——一个负责写剧本，一个负责开演。

以上就是CSS动画是什么_keyframes与animation属性核心概念解析的详细内容，更多请关注php中文网其它相关文章！