html – How could you make an animated text scroll at slow speed, then faster, and faster, then “explodes” into a final text reveal

html - Animation after toggling doesn't apply the second style

I would like to have text on a screen. Let’s use dinosaurs as an example.
In one area you would see Tyrannosaurus Rex then Stegosaurus then Triceratops, (and so on) Velociraptor, Spinosaurus, Allosaurus, Archaeopteryx, Megalosaurus.

So it would start. One word disappears and is replaced by another. Maybe it fades out and the other fades in. Then faster. And faster. And faster.
Then it explodes in some way and finally one word is revealed. Maybe Dinosaurs. Or “Big Damn Creatures” whatever it is.
And as an added thought, maybe that final text reveal slowly pulsates. Not a lot, just hovers and pulsates.

How would I even begin to do something like that?
I’m obviously not searching the right keywords in CSS animation. I’ve looked at lots of styles, codepens, articles, etc, but cannot find what I am looking for.

Source link

Leave a reply

Please enter your comment!
Please enter your name here