Animation有哪些属性

Animation有哪些属性

CSS Animation 是一个强大的工具，用于创建复杂的多阶段动画。它通过 @keyframes 定义动画的关键帧，并通过一系列属性控制动画的行为。以下是 Animation 的常用属性：

1. animation-name

• 作用：指定动画的名称，对应 @keyframes 中定义的动画。
• 示例：

  @keyframes slideIn {
      from { transform: translateX(-100%); }
      to { transform: translateX(0); }
  }
  .box {
      animation-name: slideIn;
  }
  

2. animation-duration

• 作用：定义动画的持续时间。
• 取值：时间值（如 1s、500ms）。
• 示例：

  .box {
      animation-duration: 2s;
  }
  

3. animation-timing-function

• 作用：定义动画的速度曲线。
• 常用值：
  • ease（默认）：慢快慢。
  • linear：匀速。
  • ease-in：慢到快。
  • ease-out：快到慢。
  • ease-in-out：慢快慢。
  • cubic-bezier(n,n,n,n)：自定义贝塞尔曲线。
• 示例：

  .box {
      animation-timing-function: ease-in-out;
  }
  

4. animation-delay

• 作用：定义动画开始前的延迟时间。
• 取值：时间值（如 1s、500ms）。
• 示例：

  .box {
      animation-delay: 1s;
  }
  

5. animation-iteration-count

• 作用：定义动画的播放次数。
• 取值：
  • 数字（如 2 表示播放 2 次）。
  • infinite：无限循环。
• 示例：

  .box {
      animation-iteration-count: infinite;
  }
  

6. animation-direction

• 作用：定义动画的播放方向。
• 取值：
  • normal（默认）：正向播放。
  • reverse：反向播放。
  • alternate：正向交替反向。
  • alternate-reverse：反向交替正向。
• 示例：

  .box {
      animation-direction: alternate;
  }
  

7. animation-fill-mode

• 作用：定义动画播放前后元素的样式。
• 取值：
  • none（默认）：动画结束后元素恢复初始状态。
  • forwards：动画结束后元素保持最后一帧的样式。
  • backwards：动画开始前元素应用第一帧的样式。
  • both：同时应用 forwards 和 backwards。
• 示例：

  .box {
      animation-fill-mode: forwards;
  }
  

8. animation-play-state

• 作用：控制动画的播放状态。
• 取值：
  • running（默认）：动画播放。
  • paused：动画暂停。
• 示例：

  .box:hover {
      animation-play-state: paused;
  }
  

9. 简写属性 animation

• 作用：将上述属性合并为一个简写属性。
• 语法：

  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  

• 示例：

  .box {
      animation: slideIn 2s ease-in-out 1s infinite alternate forwards;
  }
  

示例代码

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.box {
    animation-name: slideIn;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

/* 简写形式 */
.box {
    animation: slideIn 2s ease-in-out 1s infinite alternate forwards running;
}

总结

属性	作用	常用值
animation-name	指定动画名称	对应@keyframes 名称
animation-duration	定义动画持续时间	时间值（如1s、500ms）
animation-timing-function	定义动画速度曲线	ease、linear、cubic-bezier() 等
animation-delay	定义动画延迟时间	时间值（如1s、500ms）
animation-iteration-count	定义动画播放次数	数字或infinite
animation-direction	定义动画播放方向	normal、reverse、alternate 等
animation-fill-mode	定义动画播放前后元素的样式	none、forwards、backwards、both
animation-play-state	控制动画播放状态	running、paused
animation	简写属性，合并上述属性	按顺序指定各属性值

通过合理使用这些属性，可以创建出丰富、灵活的动画效果！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github