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:
Oldest comments (7)
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!
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...