css 动画在 firefox 中不工作

Question

我的代码在 Firefox 中不起作用，我不知道为什么。有什么建议吗？它在 Chrome、IE 和 Opera 中运行良好。我尝试了几乎所有前缀组合，但仍然无法正常工作。有没有可能是我的电脑或 Firefox 浏览器出了问题？

.span-accent {
    color: rgb(60, 185, 120);
    -webkit-animation: breath 2s infinite;
    -moz-animation: breath 2s infinite;
    animation: breath 2s infinite;
}

@-webkit-keyframes breath {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes breath {
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes breath {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>

Answer 1

好的伙计们，我找到了。

问题出在 <span> 元素中。出于某种原因，Firefox 不会为内联元素设置动画。

所以我所做的是将 <span> 属性更改为 display: inline-block。它不会严格地对任何 inline 元素起作用。

css 动画在 firefox 中不工作

css animation doesn't work in firefox

html

css

firefox