使用 JS 和 CSS 动画文本更改

Question

 (() => { const pEle = document.querySelector('#animated-text'); const spanEle = pEle.querySelector('span'); const words = JSON.parse(spanEle.dataset.words); let count = 0; setInterval(function(){ spanEle.innerHTML = words[count]; if (count < words.length - 1) count = count + 1; else count = 0; }, Math.ceil(Math.random() * 5) * 1000); })();

 <style> #animated-text span { color: red; } </style> <p id="animated-text"> Lorem ipsum, or lipsum as it is sometimes known, <span data-words='["One", "Two", "Three"]'>Default </span> is dummy text used in laying out print, graphic or web designs. </p>

我想使用 JS 和 CSS 来做一些 animation 如下所示。 我无法在 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 中硬编码 animation 持续时间。

Answer 1

如果你想要已经完成的事情： animate.style

看看“slideInUp”。 您只需使用 class 即可获得您想要的 animation。 如果需要，您可以添加一些代码来修改它们。

Github 项目： animate.ZC7A62 ​​8CBA22E28EB17B5F5C6AE2A266AZ