Question

我使用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;
    }
}

非常感谢任何帮助。谢谢！

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，了解您需要包含哪些内容才能支持目标浏览器。

跨浏览器CSS3关键帧动画Firefox

1 个答案: