当前位置：首页 > 文章列表 > 文章 > 前端 > CSS关键帧动画教程详解

CSS关键帧动画教程详解

2025-10-05 20:42:31 0浏览收藏

想要创建引人注目的网页动画效果吗？本文为你提供一份详尽的CSS `@keyframes`自定义动画教程，助你轻松掌握动画制作的核心技巧。通过`@keyframes`规则，你可以精确控制元素在动画过程中的样式变化，定义0%、50%、100%等关键帧，实现如滑入、淡入等效果。文章详细讲解了如何使用`animation`属性将动画绑定到元素，并设置持续时间、速度曲线、延迟、次数和方向等参数。此外，还介绍了如何添加中间帧以实现更复杂的动画效果，如弹跳动画。更重要的是，本文还分享了提升动画性能的实用技巧，例如避免触发布局重排、利用`will-change`优化渲染，以及在移动端控制动画强度，从而打造流畅且用户体验良好的网页动画。

答案：CSS的@keyframes规则用于创建自定义动画，通过定义0%、50%、100%等关键帧控制样式变化，如slideIn实现元素从左滑入并淡入；可用from/to替代0%/100%简化语法，如fadeIn实现透明度过渡；通过animation属性将动画绑定到元素，可设置持续时间、速度曲线、延迟、次数和方向，支持简写形式；可通过添加中间帧实现复杂效果，如bounce弹跳动画；建议仅动画transform和opacity以提升性能，避免触发布局重排，并结合will-change优化渲染，移动端需控制动画强度以保证用户体验。

如何用css @keyframes制作自定义动画

CSS 的 @keyframes 规则让你可以创建自定义动画，控制元素在动画过程中的样式变化。通过定义关键帧（如 0%、50%、100%），你可以精确控制动画每一阶段的表现。

定义 @keyframes 动画

使用 @keyframes 后跟一个自定义名称来创建动画，然后在花括号中设置不同时间点的CSS样式：

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

这个例子定义了一个从左滑入并淡入的动画。你也可以用 from 和 to 替代 0% 和 100%：

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

将动画应用到元素

定义好动画后，使用 animation 属性将其绑定到元素上：

.animated-box { animation-name: slideIn; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 0.2s; animation-iteration-count: infinite; animation-direction: alternate; }

或者使用简写形式：

.animated-box { animation: slideIn 1s ease-out 0.2s infinite alternate; }