Question

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

如果我有以下内容：

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

我是否需要将所有变换前缀添加到每个关键帧声明中？ EG：

@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版本也支持无前缀的转换。您可以从-webkit-transform规则中删除@keyframes声明。
我不会触及两个规则中没有前缀的transform声明。变换的前缀比动画稍早，因此一些需要@-webkit-keyframes的WebKit版本支持无前缀变换。

此外，无前缀的规则应该是最后的。这适用于属性（如transform）和at-rules（如@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);
    }
}

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

1 个答案: