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

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

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

定义 @keyframes 动画

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

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

将动画应用到元素

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

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

稿定AI绘图

稿定推出的AI绘画工具

36

查看详情

或者使用简写形式：

• 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制作自定义动画的详细内容，更多请关注php中文网其它相关文章！