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

如果我使用@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); 
    } 
}

这是行不通的吗？如果这是做到这一点的最好方式，还是有速记/快捷方式？我会想象这种方式很快就会变得笨重和可怕，即使是非常复杂的动画。

来源

2015-12-23 Mr DC

许多开发人员使用Javascript或预处理器插件来做到这一点。查看[** PrefixFree **]（http://leaverou.github.io/prefixfree/）或[** Autoprefixer **]（https://github.com/postcss/autoprefixer）...还有其他。 –

一般而言，前缀在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); 
    } 
}

来源

2015-12-23 11:07:39 BoltClock

非常感谢;这已回答了我的问题，并清除了我可能有的任何其他疑问！ –

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

回答

相关问题