CSS动画速记属性语法顺序

Question

如果 CSS 动画速记属性的值顺序是这样的：动画：[名称] [持续时间] [计时功能] [延迟] [迭代计数] [方向] [填充模式] [播放状态]; ，下面的 CSS 有什么意义？

animation: coffee-labels-active 0.5s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) both;

似乎 [delay] 在 [timing-function] 之前出现，并且填充模式是 both。 我们可以玩弄这些值的顺序吗？

Answer 1

从the specification你可以看到正式语法为

<single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

|| 的含义

双杠 (||) 分隔两个或多个选项：其中一个或多个必须以任何顺序出现。 ^ref

在同一规范中，您还会发现一些与解析 <time> 相关的额外规则，因为我们有两个规则，还有 <keyframes-name>

请注意，每个动画定义中的顺序很重要：每个<single-animation> 中可以解析为<time> 的第一个值分配给animation-duration，每个<single-animation> 中的第二个值可以是解析为<time> 被分配给animation-delay。

请注意，每个动画定义中的顺序对于区分<keyframes-name> 值和其他关键字也很重要。解析时，对于那些属性而不是animation-name，必须接受对animation-name 以外的属性有效的关键字，这些属性的值在速记中之前没有找到。

换句话说，您可以使用任何您想要的顺序，但如果您将使用两个<time>，那么第一个是持续时间，第二个是延迟，所有已知的关键字都将分配给它们各自的属性

Answer 2

不是完全随机的 - 在您的示例中，1.5s 总是在 0s 之前。

1.5s = animation-duration 0s = animation delay

如果您颠倒了顺序，使 0s 在 1.5s 之前，动画将不会运行。

所以，animation-duration 总是在 animation-delay 之前。

在以下示例中，<div class="element element2"></div> 上的动画不会运行。

    .element {
        height: 250px;
        width: 250px;
    }

    .element1 {
        background-color: red;

        /* 1.5 seconds duration / 0 seconds delay */
        animation: changeColor 1.5s 0s;
    }

    .element2 {
        background-color: red;

        /* 0 seconds duration / 1.5 seconds delay */
        animation: changeColor 0s 1.5s;
    }

    @keyframes changeColor {
        from { background:red;}
        to { background: green; }
    }

<div class="element element1">1</div>


<div class="element element2">2</div>

其余的属性似乎是随机的。

如果我说流血很明显，我深表歉意（因为我不确定，所以我必须自己检查一下）。

Answer 3

实际上，动画速记属性似乎不像其他许多 CSS 语法那样遵循严格的顺序。这是一个例子：

对于类元素，我们得到了timing function, followed by delay。

对于 element2 类，我们得到了delay followed by timing function。

对于 element3 类，我 randomized all of the animation properties 仍然输出相同。

因此，我们可以得出我们假设的结论。

.element {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation: stretch 1.5s ease-out 0s alternate infinite none running;
}

.element2 {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation: stretch 1.5s 0s ease-out alternate infinite none running;
}

.element3 {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation: stretch ease-out 1.5s  none running 0s  alternate infinite ;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1);
    background-color: yellow;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<div class="element2"></div>

<div class="element3"></div>