Question

我一直看到css animation这样的代码：

@-webkit-keyframes anim{
  0{
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg); /* Is this line needed if it is already declared below? */
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; /* Is this line needed if it is already declared below? */
  }
  100%{
    -webkit-transform: perspective(400px);
    transform: perspective(400px); /* Is this line needed if it is already declared below? */
  }
}
@keyframes anim{
  0{
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); /* Is this line needed if it is already declared above? */
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in; /* Is this line needed if it is already declared above? */
    animation-timing-function: ease-in;
  }
  100%{
    -webkit-transform: perspective(400px); /* Is this line needed if it is already declared above? */
    transform: perspective(400px);
  }
}

问题

是否有理由在-webkit代码块和@-webkit-keyframes块内的-webkit选择器中声明非 @keyframes选择器？

以下是否符合上述代码？

@-webkit-keyframes anim{
  0{
    -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function:ease-in;
  }
  100%{
    -webkit-transform:perspective(400px);
  }
}
@keyframes anim{
  0{
    transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function:ease-in;
  }
  100%{
    transform:perspective(400px);
  }
}

我们是否需要在@-webkit-keyframes中已经说明@keyframes中需要@-webkit的代码。

如果不支持@-webkit-keyframes，那么为什么还要在@keyframes块中声明-webkit功能呢？不知道这也被忽略了吗？反之亦然，如果支持@-webkit-keyframes，则浏览器将使用该块，以便为什么在-webkit块中声明@keyframes功能？

Answer 1

我们是否需要在@ -webkit-keyframes中复制代码，这些代码已经在需要@ -webkit的@keyframes中说明。

答案是“是”。

浏览器将使用它识别的任何语法，忽略它不的内容......但它始终支持支持的最后一个版本。

因此，如果broswer在未加前缀时不支持@keyframes，则会忽略整个语句并回退到前缀版本。

CSS动画：-Webkits在webkits中

1 个答案: