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:
Top comments (7)
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.
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!
I will do it tomorrow! Didn't know that dev.to parses languages in markdown.
I corrected the code in this article, thank you for advice.
Good point Andrew
I do this with my articles too
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...
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!
You're right! I corrected the mistake. The code was good but description had a mistake. Thank you!