简体   繁体   中英

Animate text change using JS and CSS

 (() => { 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>

I would like to use JS and CSS to do some animation like below. I cannot hardcode animation duration in css.

在此处输入图像描述

if you want something already done: animate.style

Look at the "slideInUp". You have just to play with the class to get the animation that you want. And you can add some code to modifiy them, if you want.

The Github Project: animate.css

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM