跨浏览器 CSS3 关键帧动画 Firefox

Posted 2023-03-06

【中文标题】跨浏览器 CSS3 关键帧动画 Firefox

【英文标题】：Cross-Browser CSS3 Keyframe Animation Firefox

【发布时间】：2014-01-04 05:42:53

【问题描述】：

我使用 CSS3 和关键帧在播放按钮（这是一个锚标记）上有一个简单的“脉动”效果。

虽然它在 Chrome 和 Safari 中完美运行，但在 Firefox 中似乎无法运行。有人知道为什么吗？

li > a 

    -webkit-animation: pulsate 3s ease-in-out;
    -moz-animation: pulsate 3s ease-in-out;
    -o-animation: pulsate 3s ease-in-out;
    animation: pulsate 3s ease-in-out;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;


@-webkit-keyframes pulsate 
    0% 
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    

    50% 
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1.0;
    

    100% 
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    

任何帮助将不胜感激。谢谢！

【问题讨论】：

为了便于维护，我建议使用 CSS 预处理器，例如 Autoprefixer。

好主意，感谢提示！

【参考方案1】：

您需要在其中包含特定于浏览器的关键帧动画及其特定于浏览器的变换

@-webkit-keyframes pulsate 
    0% 
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.3;
        
    50% 
        -webkit-transform: scale(1, 1);
        opacity: 1.0;
        
    100% 
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.3;
    

@-moz-keyframes pulsate 
    0% 
        transform: scale(0.8, 0.8);
        opacity: 0.3;
        
    50% 
        transform: scale(1, 1);
        opacity: 1.0;
        
    100% 
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    

@-ms-keyframes pulsate 
    0% 
        -ms-transform: scale(0.8, 0.8);
        opacity: 0.3;
        
    50% 
        -ms-transform: scale(1, 1);
        opacity: 1.0;
        
    100% 
        -ms-transform: scale(0.8, 0.8);
        opacity: 0.3;
    

@-o-keyframes pulsate 
    0% 
        transform: scale(0.8, 0.8);
        opacity: 0.3;
        
    50% 
        transform: scale(1, 1);
        opacity: 1.0;
        
    100% 
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    

@keyframes pulsate 
    0% 
        transform: scale(0.8, 0.8);
        opacity: 0.3;
        
    50% 
        transform: scale(1, 1);
        opacity: 1.0;
        
    100% 
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    

此外，您应该添加 -ms-animation 等效项以获得完整的浏览器支持。

---

如今，其中很多都可以安全地排除在外。查看this post，了解您需要包含哪些内容以支持您的目标浏览器。

【讨论】：

Related answer on prefixes

CSS3之母！为什么浏览器开发者要这样对我们？

@Felype 这不完全是他们的错，部分原因在于规格的制作方式。但是这些天大部分都可以省略。检查我编辑中链接的帖子，看看你需要哪个