CODEWITHSUNDEEP
cssbrowserwebkitcss-animations
DreamTeK
DreamTeK

Reputation: 34197

CSS Animations : -Webkits in webkits

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?

Upvotes: 0

Views: 52

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

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.

Upvotes: 1

Related Questions