animation 属性详解
animation 是 @keyframes 的“播放控制器”：名称、时长、缓动、延迟、播放次数、方向、填充模式、暂停状态，共 8 个值。常用简写：animation: name 2s ease infinite alternate。
animation-fill-mode: both 让动画在开始前保持第一帧、结束后保持最后一帧——做“渐入”特效时必备，否则元素会闪回隐藏状态。
- infinite 循环播放；alternate 交替反向（来回摆动）
- animation-play-state: paused 可用类来控制“暂停/继续”
- fill-mode: backwards/both 解决“延迟期间元素未就位”的闪烁
HTML
<style> @keyframes slideIn { from { transform: translateX(-80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .card { width: 240px; height: 80px; margin: 14px auto; border-radius: 10px; background: #4a9eff; color: #fff; display: flex; align-items: center; justify-content: center; animation: slideIn 1.2s ease both; } .c2 { background: #f778ba; animation-delay: .25s; } .c3 { background: #57ab5a; animation-delay: .5s; } </style> <div class="card">animation 1</div> <div class="card c2">延迟 0.25s</div> <div class="card c3">延迟 0.5s</div>
本节要点animation 八值：名称 时长 缓动 延迟 次数 方向 填充 暂停；渐入必备 fill-mode: both。
