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