如何在前缀（关键帧）中添加前缀（转换）？

Question

如果我使用@keyframes 来执行变换动画，我将如何布置我的前缀？

如果我有以下情况：

@keyframes animation {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

然后我需要将我所有的变换前缀添加到每个关键帧声明中吗？例如：

@keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

这行得通吗？如果这是最好的方法，还是有速记/更快的方法？我想这种方式很快就会显得笨重而可怕，即使是稍微复杂的动画。

Answer 1

一般来说，前缀是一团糟，尤其是在涉及 CSS 动画和变换时。我有一个管理这两个功能前缀的综合指南，您可以找到 here。

你所拥有的当然有用，但没必要：

• IE 以外的浏览器无论如何都不会识别 -ms-transform 声明，并且支持开箱即用 CSS 动画的 IE 版本也支持无前缀的 transform。

  这意味着根本不需要-ms-transform。您应该删除它的所有实例。您只需要在 CSS 动画之外真正需要它，您希望转换在 IE9 中静态工作。有关详细信息，请参阅上面的链接。

• 动画和变换直到最近才在 WebKit 中无前缀。但是，支持 @keyframes 无前缀的 WebKit 版本也支持无前缀转换。您可以从 @keyframes 规则中删除 -webkit-transform 声明。

• 我不会在这两个规则中触及不带前缀的 transform 声明。不带前缀的变换略早于动画，因此一些需要 @-webkit-keyframes 的 WebKit 版本确实支持不带前缀的变换。

此外，不带前缀的规则应该放在最后。这适用于属性（如transform）和规则（如@keyframes）。这是经过上述优化的 CSS：

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@keyframes animation {
    0%   {
        transform:rotate(0deg);
    }
    100% { 
        transform:rotate(360deg);
    }
}