Are vendor prefixes important to write inside a @keyframe with a vendor prefixed in CSS?

Question

I am confused. Which one is the correct way to write @keyframe rules ?

@-webkit-keyframes Name {
   0%,100% {
     -webkit-transform:scale(0,0);
   }
}

OR

@-webkit-keyframes Name {
    0%,100% {
     transform:scale(0,0);
    }
}

Or

 @-webkit-keyframes Name {
      0%,100% {
      -webkit-transform:scale(0,0);transform:scale(0,0);
      }
  }

The way that works… To see, which vendor prefix is necessary to suppoort which browsers you can use for example caniuse.com: http://caniuse.com/#search=keyframes and http://caniuse.com/#search=transform — feeela, Feb 24 '14 at 08:55
well this might help : http://stackoverflow.com/questions/10831795/what-transition-property-to-use-for-transform — , Feb 24 '14 at 09:01
@feeela That i know well. but my question is, how to write css3 properties inside vender base keyframes.. — wikijames, Feb 24 '14 at 10:44
@jdniki No, that's for simple w3c base default method for all browser if they are not using prefix — wikijames, Feb 24 '14 at 10:45
If you don't feel like dealing with vendor prefixes use [Prefix free](http://leaverou.github.io/prefixfree/). — SeinopSys, Feb 24 '14 at 11:18

Harish Boke · Accepted Answer · 2014-02-24T11:42:43.817

Yes, prefixes are important as browser support depend on that caniuse.com resources this article help you to write keyframe and make sure you are writing normal selector at the end that uses your default declaration first and if browser don't support then it pick prefixes :

way to write keyframes:

    @-webkit-keyframes NAME-YOUR-ANIMATION {
      0%   {-webkit-transform:scale(0,0);
            transform:scale(0,0); }
      100% { -webkit-transform:scale(1,1);
             transform:scale(1,1);}
    }
    @-moz-keyframes NAME-YOUR-ANIMATION {
      0%   { -moz-transform:scale(0,0);
            transform:scale(0,0); }
      100% { -moz-transform:scale(1,1);
             transform:scale(1,1);  }
    }
    @-o-keyframes NAME-YOUR-ANIMATION {
      0%   { -o-transform:scale(0,0);
             transform:scale(0,0);
 }
      100% { -o-transform:scale(1,1);
             transform:scale(1,1);}
    }

OR

@keyframes NAME-YOUR-ANIMATION {
  0%   { -o-transform:scale(0,0);
        -moz-transform:scale(0,0);
        -webkit-transform:scale(0,0);
        -ms-transform:scale(0,0);
         transform:scale(0,0); }
  100% { -moz-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        -ms-transform:scale(1,1);
         transform:scale(1,1); }
}

Why on earth would you want -webkit prefixes inside the opera specific keyframes declaration (and vice versa, etc.), and you have forgotten them entirely in front of `animation` — xec, Feb 24 '14 at 09:40
@Harish You means that I should use 3rd option( write with vender prefix and normal inside keyframe with vender prefix ? — wikijames, Feb 24 '14 at 10:43
@Harish Yes, i hope it should work as i have many keyframes on stack. will test and then get back to you — wikijames, Feb 24 '14 at 11:45

Are vendor prefixes important to write inside a @keyframe with a vendor prefixed in CSS?

OR

Or

1 Answers1