#CSS

======================================================

1. 核心实现步骤

• 定义动画关键帧：使用@keyframes规则

• 设置动画属性：如动画名称、持续时间、延迟等

• 应用动画：将动画添加到目标元素

• 调整动画效果：使用缓动函数和填充模式

======================================================

2. CSS关键帧定义

/* 定义动画 */
@keyframes animation-name {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

/* 简化版关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

======================================================

3. 动画属性

• animation-name：指定动画名称

• animation-duration：动画持续时间（如 1s）

• animation-timing-function：动画缓动函数（如 ease、linear）

• animation-delay：动画延迟时间（如 0.5s）

• animation-iteration-count：动画重复次数（如 infinite 无限循环）

• animation-direction：动画播放方向（如 alternate 交替）

• animation-fill-mode：动画填充模式（如 forwards 保持结束状态）

• animation-play-state：动画暂停paused，配合hover使用

======================================================

4. 复合属性

/* 复合属性 */
animation: name duration timing-function delay iteration-count direction fill-mode;

/* 示例 */
animation: fadeIn 1s ease 0s 1 forwards;

======================================================

5. 示例代码

<div class="animated-element"></div>

/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 应用动画 */
.animated-element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

======================================================

6. 实现原理

• 关键帧：定义动画的不同阶段状态

• 过渡：浏览器自动计算关键帧之间的过渡效果

• 执行：按照指定的时间和缓动函数执行动画

• 控制：通过动画属性控制播放行为

======================================================