css - 跨浏览器 CSS3 关键帧动画 Firefox

Question

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

虽然它在 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;
    }
}

如有任何帮助，我们将不胜感激。谢谢!

Answer 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找出您需要包含哪些以支持您的目标浏览器。