Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Best (prefixed) syntax for @keyframes?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #160683
    Anonymous
    Inactive

    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.

    #160684
    jaimebarriga
    Participant

    First 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!

    #160685
    Anonymous
    Inactive

    @jaimebarriga

    did 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/

    #160699
    basement31
    Participant

    As you can see, you still need to prefix transforms (even 2d ones)
    http://caniuse.com/transforms2d

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.