DEV Community 👩‍💻👨‍💻

Cover image for CSS animations - slide text
Chris Texe
Chris Texe

Posted on

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:

Slide text to the right in CSS

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
    }
}

Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Chris Texe Twitter

Chris Texe LinkedIn

Also you can visit my websites:

Top comments (7)

Collapse
link2twenty profile image
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!');
Enter fullscreen mode Exit fullscreen mode

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!

Example of how to add syntax highlighting in code blocks

Collapse
texe profile image
Chris Texe Author • Edited on

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

Collapse
texe profile image
Chris Texe Author

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

Collapse
damkols profile image
Kolapo Damola Usman

Good point Andrew
I do this with my articles too

Collapse
incrementis profile image
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...

Image description

Collapse
pixiebrix profile image
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!

Collapse
texe profile image
Chris Texe Author

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

🌖🌗🌘 Turn on dark mode in Settings