CSS动画速记属性语法顺序

Question

如果 CSS 动画速记属性的值顺序如下:animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]; ，下面的 CSS 有何意义？

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

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

Answer 1

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

对于类元素，我们有计时功能，后跟延迟。

对于类 element2，我们有 delay followed by timing function。

对于 element3 类，我随机化了所有动画属性，但输出仍然相同。

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

.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>