CSS 动画仅适用于 google chrome？

Question

这是代码，目前它适用于 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?";
    }

}

Answer 1

动画内容在 Safari 中总是有问题，尝试不同的东西：

#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>

CSS 动画仅适用于 google chrome？

CSS animation only working in google chrome?

css

browser

animation