Create Fly-In Text in CSS

Here, we use CSS to create fly-in text (also referred to as "zoom-in text" and "slide-in text").

To create fly-in text, we use a basic CSS marquee but with a few modifications.

Slide-In Gradually

You can add replace linear with ease-out to make the text slide in gradually.

You could also use ease, which would make it start gradually too. But in this case, we wouldn't notice any difference because it's hidden when it starts (because we use translateX(200%)).

Slide-Up Gradually

You can change translateX() to translateY() to make the text slide up (or down).

In this example, I also explicitly set the height of the box in order to provide enough height to get the effect.