CSS动画速记属性语法顺序

Posted 2023-03-06

【中文标题】CSS动画速记属性语法顺序

【英文标题】：CSS animation shorthand property syntax order

【发布时间】：2018-05-23 16:30:54

【问题描述】：

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

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

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

【问题讨论】：

我看到你从来没有回复过这个答案，如果你觉得它有帮助，希望你给它评分或标记它。干杯

感谢高清！很好的解释。投了赞成票。对于像我这样的新编码人员，如果这些值遵循一些严格的顺序会很有帮助，这样我就知道我在看什么值。

你可以标记它，因为没有其他人回答它，但无论如何你的欢迎:)

【参考方案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>，那么第一个是持续时间，第二个是延迟，所有已知的关键字都将分配给它们各自的属性

【参考方案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>

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

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

【讨论】：

很好的解释，正如您所提到的，0s 持续时间和 1s 延迟是没有意义的。所以第一次值必须是持续时间值

【参考方案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>