Question

As documented we can define animation in CSS3 like

.class1{
    animation: name duration timing-function delay iteration-count direction play-state
}

I want to know if I’ve given value for every attribute like name,duration,timing-function etc other than delay then how browser understand that I’ve skipped delay property.

then if I’ve given all the corresponding values for animation property then it is 1:1 matching to attributes and values but if want to skip any intermediate attribute for example

.class1 {
    animation: anim 2s cubic-bezier(0 0 1 1) 2 alternate running
}

here I’ve skipped delay So how browser get to know that I’ve skipped delay attribute but not the others.

Answer 1

The official W3C draft is very sketchy and you will not get a good “official” answer. Basically the browser tries to parse each value according to the specification order, skipping those subproperties that do not match the corresponding value in the animation property; so it first sees that the first value is a valid animation-name, then the second is a valid animation-duration, and goes on until it reaches the value 2, which is not a valid value for animation-delay, so it skips animation-delay and checks to see if it is a valid animation-iteration-count, which it is.