CSS animation shorthand property syntax order

Question

If the order of values for the CSS animation shorthand property are as such : animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]; , how does the below CSS make sense?

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

It appears that [delay] is coming before [timing-function] and that the fill mode is both. Are we able to play around with the order of these values?

Answer 1

Actually, it seems that the animation shorthand property doesn't follow a strict order as many of the other CSS syntaxes do. Here's an example:

For the class element we have got the timing function, followed by delay.

For the class element2 we have got delay followed by timing function.

For the class element3, I randomized all of the animation properties and still the output is same.

Hence, we can conclude what we assumed.

.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

Not completely randomised - 1.5s always precedes 0s in your example.

1.5s = animation-duration 0s = animation delay

If you reversed the order so that 0s preceded 1.5s the animation wouldn't run.

So, animation-duration always precedes animation-delay.

In the following example, the animation on <div class="element element2"></div> won't run.

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

The rest of the properties do seem to be randomised.

Apologies if I'm stating the bleeding obvious (I had to check it out for myself as I wasn't sure).

Answer 3

From the specification you can see the formal syntax as

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

Where || means

A double bar (||) separates two or more options: one or more of them must occur, in any order. ^ref

In that same specification you will also find some extra rules related to parsing the <time> since we have two of them and also <keyframes-name>

Note that order is important within each animation definition: the first value in each <single-animation> that can be parsed as a <time> is assigned to the animation-duration, and the second value in each <single-animation> that can be parsed as a <time> is assigned to animation-delay.

Note that order is also important within each animation definition for distinguishing <keyframes-name> values from other keywords. When parsing, keywords that are valid for properties other than animation-name whose values were not found earlier in the shorthand must be accepted for those properties rather than for animation-name.

In other words, you can use any order you want but if you will use two <time> then the first one is the duration and the second one is the delay and all the known keywords will be assigned to their respective property