CSS 动画：-webkit 中的 Webkit

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-keyframes 代码块中声明非 -webkit 选择器并在 [=17= 代码块中声明 -webkit 选择器]块？

下面的代码是否等同于上面的代码？

@-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，那么浏览器将使用该块，那么为什么要在 @keyframes 块中声明 -webkit 功能？

Answer 1

Do we need to duplicate code within @-webkit-keyframes that is already stated in @keyframes where the @-webkit Is required.

答案是"Yes"。

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

因此，如果浏览器在未加前缀时不支持 @keyframes，它将忽略 整个语句 并回退到带前缀的版本。

CSS 动画：-webkit 中的 Webkit

CSS Animations : -Webkits in webkits

css

browser

webkit

css-animations