供应商前缀是否重要写在一个@keyframe与供应商前缀的CSS？ [英] Are vendor prefixes important to write inside a @keyframe with a vendor prefixed in CSS?

问题描述

我很困惑。哪一个是写@keyframe规则的正确方法？

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

推荐答案

是，前缀非常重要，因为浏览器支持取决于 caniuse.com
资源本文帮助您编写关键帧，并确保您在使用默认的如果浏览器不支持那么它选择前缀：

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 :

写关键帧的方式：

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

这篇关于供应商前缀是否重要写在一个@keyframe与供应商前缀的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！