Css转换不适用于mozilla
Css转换不适用于mozilla
提问于 2016-04-20 06:47:46
我正在用构建一个过渡:在、css和内容之后，使用下面的代码，它在chrome上运行良好，但在Firefox26.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>回答 1
Stack Overflow用户
发布于 2016-04-20 09:33:53
content属性不应该是可动画的。
Chrome似乎允许这样做(我不知道为什么)，但是Firefox更严格一些。
基本上，FF遵循的是预期的行为，Chrome不是。
来自CSS-Tricks的Coyier
在我自己的测试中，动画内容只适用于稳定的桌面Chrome (编写时的v46)。其他任何地方都没有支持。桌面或iOS上没有Safari。没有火狐。没有IE。每个浏览器都会忽略动画，只显示伪元素中的原始内容。 在遥远的将来，这可能是一个方便的技巧，也可能永远得不到任何东西的支持。非标准的功能至少总有被废弃的风险，所以这种Chrome支持可能不会永远持续下去。 如果您需要以跨浏览器友好的方式更改内容 使用JavaScript.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36735869
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号