css animation如何设置关键帧
最新回答
陌上柳絮倾城雪
2026-10-22 12:47:09
在 CSS 中设置关键帧动画的核心是通过 @keyframes 规则定义动画序列，再通过 animation 属性将其绑定到元素。以下是具体步骤和注意事项：
1. 定义关键帧动画使用 @keyframes 规则命名动画，并在大括号内设置不同时间节点的样式变化。时间节点可用百分比（如 0%、50%、100%）或 from/to（替代 0%/100%）表示。
基础位移与透明度渐变示例：
@keyframes slideIn { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; }}或简写为：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}多关键帧复杂效果：通过添加中间状态（如 50%）实现弹跳、旋转等复杂动画：
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); }}
定义关键帧后，通过 animation 属性将动画绑定到元素，可单独设置各子属性或使用简写形式。
单独设置子属性：
.animated-box { animation-name: slideIn; /* 动画名称 */ animation-duration: 2s; /* 动画时长 */ animation-timing-function: ease-out; /* 速度曲线 */ animation-delay: 0.5s; /* 延迟时间 */ animation-iteration-count: infinite; /* 重复次数 */ animation-direction: alternate; /* 交替方向 */}简写形式（推荐）：按顺序指定 名称 持续时间 速度曲线 延迟 重复次数 方向：
.animated-box { animation: slideIn 2s ease-out 0.5s infinite alternate;}
名称唯一性：@keyframes 名称需唯一，避免与现有名称冲突，且不包含特殊字符（如 @、!）。
动画属性应用：确保 animation 属性绑定到目标元素，否则动画不生效。
控制动画外状态：使用 animation-fill-mode 控制动画结束后的样式：
forwards：保持动画结束状态。
backwards：应用动画开始前的样式（受 delay 影响）。
both：结合两者特性。
.animated-box { animation: slideIn 2s ease-out forwards;}性能优化：优先使用 transform 和 opacity 属性，它们不会触发重排（reflow），仅导致重绘（repaint），性能更优。
此示例中，蓝色方块会从左侧滑入，透明度从 0 渐变到 1，动画结束后保持最终状态。
通过合理定义关键帧和配置动画属性，可轻松实现平滑的页面交互效果。
热门标签
