- This topic is empty.
-
AuthorPosts
-
January 17, 2014 at 6:08 pm #160683AnonymousInactive
Which of the following three variations of the
@keyframes
syntax is considered correct?A
@-webkit-keyframes myAnimate { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(20px); } } @-moz-keyframes myAnimate { 0% { -moz-transform: translateX(0); } 100% { -moz-transform: translateX(20px); } } @keyframes myAnimate { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } }
B
@-webkit-keyframes myAnimate { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } } @-moz-keyframes myAnimate { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } } @keyframes myAnimate { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } }
C
@keyframes myAnimate { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } }
Note: According to CSS Lint, syntax B + C pass without errors or warnings. Syntax A passes with no errors, but four warnings.
January 17, 2014 at 6:51 pm #160684jaimebarrigaParticipantFirst off, did you leave out the -o- prefixed keyframe for Opera on purpose? If you want it to work on Opera you will need it.
The correct one is A. I tested B and C on Firefox 14 for example, and they did not work because the transform property was unprefixed.
Having watched a lot of the CSS-Tricks Screencasts, I have come to use a website called http://www.css3please.com which is up-to-date with all cross-browser CSS3 rules, including keyframes! It is a good reference for CSS3!
January 17, 2014 at 7:04 pm #160685AnonymousInactivedid you leave out the -o- prefixed keyframe for Opera on purpose? If you want it to work on Opera you will need it.
I left it out to keep the examples short and simple
The correct one is A. I tested B and C on Firefox 14 for example, and they did not work because the transform property was unprefixed.
Interesting…I wonder why A is the only example to receive warnings with CSS Lint. I’ve actually been using that method, but was looking at the others because the syntax is cleaner.
Anyways, I came across the following article…touching on a similar topic:
http://www.impressivewebs.com/mixing-css3-keyframe-animations/
January 18, 2014 at 2:03 am #160699basement31ParticipantAs you can see, you still need to prefix transforms (even 2d ones)
http://caniuse.com/transforms2dSo, if you need to prefix the animation keyframes (which you do http://caniuse.com/#feat=css-animation) then you need to do both, combined.
Eventually you’ll be able to do this
@keyframes myAnimate { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } }
But until then, both keyframes and transforms require prefixing in every instance theyre used.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.