CSS动画只能在google chrome中工作吗？
CSS动画只能在google chrome中工作吗？
提问于 2021-06-06 02:11:20
这就是代码，目前它可以在google chrome上运行，但不能在safari上运行？我需要它在大多数浏览器上工作，希望你们中的一些人能帮助我，谢谢！
#changing::before{
content: "depression?";
animation: animate infinite 20s;
padding-left: 10px;
animation-delay: 2s;
}
@keyframes animate {
0% {
content: "stress?";
}
50% {
content: "angst?";
}
100% {
content: "depression?";
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-06 03:18:11
在Safari中动画内容总是有buggy的，尝试一些不同的东西：
#changing::before {
content: "depression? \Astress? \A angst?";
white-space: pre;
display: inline-block;
animation: animate infinite 2s steps(3); /* change the number if you will have more text */
padding-left: 10px;
}
#changing {
font-size: 20px;
line-height: 1.2em;
height:1.2em; /* same as line-height*/
overflow:hidden;
}
@keyframes animate {
to{transform:translateY(-100%);}
}<div id="changing"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67852609
复制相关文章
相似问题
腾讯云开发者
