Css transition在Mozilla上不起作用

我正在使用以下代码使用 ：after 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>

content 属性不是可动画的。

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

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

内容 @ MDN

来自 Chris Coyier 在 CSS-Tricks

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

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

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

使用 JavaScript。

相关内容

最新更新

热门标签：