CSS @keyframes自定义动画教程

CSS @keyframes 是实现高性能、高可控性网页动画的核心利器，它让你通过定义0%、50%、100%等关键帧（或更简洁的from/to）精准操控元素在动画过程中的transform位移、opacity透明度等样式变化，再配合animation属性灵活设置时长、缓动、延迟、循环与方向——从平滑滑入、淡入到弹跳效果都能轻松驾驭；更重要的是，文中强调只动画transform和opacity以避免重排、善用will-change提示渲染优化、并在移动端克制动画强度，真正帮你写出既炫酷又流畅、兼顾用户体验与性能的现代CSS动画。

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

定义 @keyframes 动画

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

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

将动画应用到元素

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

或者使用简写形式：

• animation-duration：动画持续时间
• animation-timing-function：速度曲线，如 ease、linear、cubic-bezier()
• animation-delay：延迟开始时间
• animation-iteration-count：播放次数，可设为数字或 infinite
• animation-direction：播放方向，normal、reverse、alternate 等

添加多个关键帧实现复杂效果

你可以加入中间状态让动画更丰富。比如一个弹跳效果：

这个动画在起点和终点位置居中，中间向上移动 20px，形成弹跳感。

注意事项与技巧

确保动画性能良好，尽量只动画 transform 和 opacity 属性，因为它们不会触发重排，效率更高。

• 避免动画 width、height、margin、padding 等会引发布局变化的属性
• 可以结合 will-change 提示浏览器优化动画元素
• 在移动端注意动画强度，避免过度影响用户体验

本篇关于《CSS @keyframes自定义动画教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！