0

I keep seeing css animation code like this:

@-webkit-keyframes anim{
  0{
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg); /* Is this line needed if it is already declared below? */
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; /* Is this line needed if it is already declared below? */
  }
  100%{
    -webkit-transform: perspective(400px);
    transform: perspective(400px); /* Is this line needed if it is already declared below? */
  }
}
@keyframes anim{
  0{
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); /* Is this line needed if it is already declared above? */
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in; /* Is this line needed if it is already declared above? */
    animation-timing-function: ease-in;
  }
  100%{
    -webkit-transform: perspective(400px); /* Is this line needed if it is already declared above? */
    transform: perspective(400px);
  }
}

QUESTION

Is there any reason to declare non -webkit selectors within a @-webkit-keyframes code block and -webkit selectors within an @keyframes block?

Is the following equivelant to the code above?

@-webkit-keyframes anim{
  0{
    -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function:ease-in;
  }
  100%{
    -webkit-transform:perspective(400px);
  }
}
@keyframes anim{
  0{
    transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function:ease-in;
  }
  100%{
    transform:perspective(400px);
  }
}

Do we need to duplicate code within @-webkit-keyframes that is already stated in @keyframes where the @-webkit Is required.

If @-webkit-keyframes is not supported then why bother to declare -webkit functionality within the @keyframes block? Won't this be ignored also? And vice versa, If @-webkit-keyframes IS supported then the browser will use that block so why declare -webkit functionality in the @keyframes block?

DreamTeK
  • 32,537
  • 27
  • 112
  • 171

1 Answers1

1

Do we need to duplicate code within @-webkit-keyframes that is already stated in @keyframes where the @-webkit Is required.

The answer is "Yes".

The browser will use whatever syntax it recognizes and ignore what it does not...but it will always support the last version that it does support.

So if the broswer doesn't support @keyframes when unprefixed it will ignore the whole statement and fallback to the prefixed version.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • But if `@-webkit-keyframes` is not supported then why bother to declare `-webkit` functionality within the `@keyframes` block? Won't this be ignored also? And vice versa, If `@-webkit-keyframes` IS supported then the browser will use that block so why declare `-webkit` functionality in the `@keyframes` block? – DreamTeK Aug 21 '15 at 14:46
  • `-webkit` functionality is not a universal thing. `-webkit-transform` might be supported before `-webkit-keyframes` for instance or vice versa. So you have to mix&match for full support. Most prefixing systems like [**PrefixFree**](http://leaverou.github.io/prefixfree/) and [**AutoPrefixer**](https://github.com/postcss/autoprefixer) will manage this for you. – Paulie_D Aug 21 '15 at 14:54