css - 供应商前缀对于在 @keyframe 中写入供应商前缀是否重要？

Question

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

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

或

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

或

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