CSS动画是什么？keyframes与animation使用教程

前往漫画官网入口并下载

CSS动画是现代前端开发中提升用户体验的关键技术，它允许网页元素在没有JavaScript或Flash的情况下，实现平滑的样式过渡。本文深入解析了CSS动画的核心：`@keyframes`规则和`animation`属性。`@keyframes`用于定义动画的关键帧，如同动画的“剧本”，描述元素在不同时间点的样式状态；`animation`属性则负责将定义的动画应用到具体元素上，并控制动画的播放时长、速度曲线、循环次数等。掌握`@keyframes`和`animation`的配合使用，开发者可以轻松创建按钮悬停、加载提示、页面入场动效等各种视觉效果，实现“定义”与“应用”的分离，提升网页的交互性和吸引力。

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

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

什么是 @keyframes 规则

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

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

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

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

animation 属性详解

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

常用子属性包括：

• 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使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！