供应商前缀对于在@keyframe 中写入以 CSS 为前缀的供应商是否重要？

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