供应商前缀对于在带有CSS前缀的供应商的@keyframe内写入是否很重要？

Question

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

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

OR

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

或

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

Answer 1

是的，前缀非常重要，因为浏览器支持取决于caniuse.com resources这篇文章可以帮助你编写关键帧，并确保你在最后使用默认声明的结尾编写普通选择器，如果浏览器不支持，则选择前缀：

编写关键帧的方法：

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