Question

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

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

似乎[延迟]在[计时功能]之前到来，填充模式为both。我们能够使用这些值的顺序吗？

Answer 1

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

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

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

对于class 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>

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

从 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>。

换句话说，您可以使用任何您想要的顺序，但如果您将使用两个 <?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="text" omit-xml-declaration="yes"/> <xsl:strip-space elements="*" /> <xsl:template match="/"> <xsl:for-each select="/plan/CollectionA/SubCollection/Attributes/Items"> <xsl:value-of select="/plan/src"/> <xsl:text>|</xsl:text> <xsl:value-of select="/plan/Id"/> <xsl:text>|</xsl:text> <xsl:value-of select="../../name"/> <xsl:text>|</xsl:text> <xsl:value-of select="."/> <xsl:text>
</xsl:text> </xsl:for-each> </xsl:template> </xsl:stylesheet>，那么第一个是持续时间，第二个是延迟，所有已知关键字将分配给它们各自的财产

CSS动画速记属性语法顺序

3 个答案: