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

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

这个有用吗？如果这是执行此操作的最佳方法，还是有 shorthand / 更快的方法？我想即使是稍微复杂的动画，这种方式也会很快看起来笨重和可怕。

Answer 1

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

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

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

这意味着根本不需要 -ms-transform。您应该删除它的所有实例。在 CSS 动画之外，您真正需要它，您希望转换在 IE9 中静态工作。详情见上文link。
动画和变换最近才在 WebKit 中取消前缀。但是，支持 @keyframes unprefixed 的 WebKit 版本也支持 transforms unprefixed。您可以从 @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);
    }
}

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

How do i add prefixes (transform) within prefixes (keyframes)?

css

cross-browser

vendor-prefix

css-animations