CSS 动画进阶指南 🎨

关键帧动画（@keyframes）

通过定义动画的起始和结束状态，实现复杂效果。例如：

@keyframes slideIn {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

动画属性详解

属性	说明
`animation-duration`	动画持续时间（如 `2s`）
`animation-timing-function`	速度曲线（如 `ease-in`）
`animation-delay`	延迟开始时间（如 `0.5s`）
`animation-iteration-count`	循环次数（`infinite` 无限循环）
`animation-fill-mode`	动画填充模式（`forwards` 保持最终状态）

高级技巧

多动画组合：使用 animation 简写属性叠加效果
```
animation: slideIn 2s ease-in, fadeIn 1s linear;
```
动画缓存：通过 animation-play-state 控制暂停/播放

CSS 变量动态控制：

:root { --speed: 1s; }
animation-duration: var(--speed);

浏览器兼容性

确保使用 @supports 检查特性支持：

@supports (animation: var(--speed)) {
  /* 高级动画代码 */
}

实战案例

尝试创建一个渐变悬停效果：

<a href="#" class="hover-button">点击我</a>

.hover-button {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  animation: gradientShift 5s infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

🔗 点击此处查看 CSS 动画基础教程了解更多入门知识！