CODEWITHSUNDEEP
css
wikijames
wikijames

Reputation: 192

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

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);
      }
  }

Upvotes: 3

Views: 512

Answers (1)

Harish Boke
Harish Boke

Reputation: 557

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); }
}

Upvotes: 2

Related Questions