CSS animations - slide text

Recently I showed you how to fade in or out any text in your HTML document. Today I will show you how to easily slide text into direction we want.

Slide into the right

First let's try to slide it into the right like this:

The code is very simple:

.ct-slide-right {
    position: relative;
    animation: my_animation 1s;
    animation-fill-mode: both;

}

@keyframes my_animation {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

Let's stop here for a second and see what we have here. The main elements of this code are:

animation: my_animation 1s; - we have here the name of our animation and duration, 1 second in this case

@keyframes my_animation - defines our animation. So the start position is -300px from the left side and opacity 0. Then we are going to the to state. In this case margin left will be 0 and opacity 1. Duration of this takes 1 second. Opacity adds some smooth revealing.

Slide into the left

To change direction just change left into right in animation parameters:

@keyframes my_animation {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

Slide into the top

If you want to move your text from bottom to top just change the same parameters but this time into bottom:

@keyframes animatetop {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

Slide into the bottom

And analogous change the bottom into top when you want to move element from top to the bottom:

@keyframes animatebottom {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

---

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

• Linux blog
• Web Agency website

Comments

[Andrew Bone]

Hello!

If you'd like, you can add syntax highlighting (colours that make code easier to read) to your code block like the following example.

console.log('Hello world!');

This should make it a bit easier to understand your code. 😎

In order to use this in your code blocks, you must designate the coding language you are using directly after the first three back-ticks. So in the example above, you'd write three back-ticks js (no space between the two), put the code beneath (e.g. console.log('Hello world!');), then three back-ticks beneath that to close the code.

Here's an image that shows how it's written!

[Chris Texe]

I will do it tomorrow! Didn't know that dev.to parses languages in markdown.

[Chris Texe]

I corrected the code in this article, thank you for advice.

[Kolapo Damola Usman]

Good point Andrew
I do this with my articles too

[Akin C.]

Hello Chris Texe,

Thank you for your article on "CSS animations - slide text".
It was fun trying out the code.
As you should see in the following GIF...

[pixiebrix]

Hey I think that in this paragraph:
To change direction just change right into right in animation parameters:
You mean
To change direction just change **left** into right in animation parameters:

:) Good job with the tutorial!

[Chris Texe]

You're right! I corrected the mistake. The code was good but description had a mistake. Thank you!