Question

我正在使用：之后的css和内容使用下面的代码构建转换，它在chrome上工作正常，但不能在firefox 26.0上运行。为什么？

我做错了什么？我无法理解吗？帮帮我

<html>
<head>

<style type="text/css">
.teacherheading {
display: inline-block;
font-size:20px;
}

.teacherheading::after{content:'educational';

animation: 8s ease-out 2s pulsate;
animation-iteration-count: infinite;

-webkit-animation: 8s ease-out 2s pulsate;
-webkit-animation-iteration-count: infinite; 

-moz-animation: 8s ease-out 2s pulsate;
-moz-animation-iteration-count: infinite; 

-o-animation: 8s ease-out 2s pulsate;
-o-animation-iteration-count: infinite;

}


@-keyframes pulsate {
    0% {content:'educational';}
    25% {content:'testprep';}
    50% {content:'tutoring';}
    75% {content:'training';}
    100% {content:'educational';}
}
@-webkit-keyframes pulsate {
    0% {content:'educational';}
    25% {content:'testprep';}
    50% {content:'tutoring';}
    75% {content:'training';}
    100% {content:'educational';}
}

@-moz-keyframes pulsate {
    0% {content:'educational';}
    25% {content:'testprep';}
    50% {content:'tutoring';}
    75% {content:'training';}
    100% {content:'educational';}
}

@-o-keyframes pulsate {
    0% {content:'educational';}
    25% {content:'testprep';}
    50% {content:'tutoring';}
    75% {content:'training';}
    100% {content:'educational';}
}

</style>

<body>
<div style="font-size:20px">
Start your <div class="teacherheading"></div> institution
</div>
</body>
</html>

Answer 1

content属性并不是可动画的。

Chrome似乎允许这样做（我不知道为什么），但Firefox更加严格。

基本上FF遵循预期的行为，Chrome不是。

Content @ MDN

来自Chris Coyier CSS-Tricks

在我自己的测试中，动画内容仅适用于稳定的桌面Chrome（撰写本文时为第46版）。其他地方没有支持。桌面或iOS上没有Safari。没有Firefox。没有IE。这些浏览器中的每一个都将忽略动画，仅显示伪元素中的原始内容。

在遥远的未来，它可能是一个方便的技巧，或者它可能永远不会得到任何支持。非标准功能始终至少有被弃用的风险，因此Chrome支持可能不会永远持续下去。

如果您需要以跨浏览器友好的方式更改内容

使用JavaScript。

Css过渡不适用于Mozilla

1 个答案: