CSS animation 动画属性详解

animation

简写：animation: name duration timing-function delay iteration-count direction fill-mode;

animation: example2 4s ease-in-out -2s 1 alternate forwards;

tip

delay 需要加上单位 s

示例

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div style="display: flex;justify-content: space-around">
      <div
        style="width: 100px;height: 100px;color: white;
		animation: example1 4s linear 0s 1 alternate forwards;"
      >
        div
      </div>
      <div
        style="width: 100px;height: 100px;color: white;
		animation: example2 4s linear 0s 1 alternate forwards;"
      >
        这是div1
      </div>
      <div
        style="width: 100px;height: 100px;color: white;
		animation: example2 4s ease-in-out -2s 1 alternate forwards;"
      >
        这是div2
      </div>
    </div>
    <style>
      @keyframes example1 {
        from {
          background-color: red;
        }
        to {
          background-color: black;
        }
      }

      @keyframes example2 {
        0% {
          background-color: red;
        }
        25% {
          background-color: yellow;
        }
        50% {
          background-color: blue;
        }
        100% {
          background-color: green;
        }
      }
    </style>
  </body>
</html>

{
  "show": true
}

:::

animation-delay

允许负值，-2s 使动画马上开始，但跳过 2s 进入动画。

animation-direction

是否应该轮流反向播放动画。

normal: 默认值。动画应该正常播放。
alternate: 动画应该轮流反向播放。
reverse: 动画以反方向播放（向后）
alternate-reverse: 动画先向后播放，然后向前

animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见。

none: 不改变默认行为。动画执行完仍是原本的样式
forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards: 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。实际效果和 none 很像
both: animation-fill-mode 相当于同时配置了 backwards 和 forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式。

animation-iteration-count

n:定义动画播放次数的数值。
infinite:规定动画应该无限次播放。

animation-timing-function

linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。