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中不起作用

1 个答案: