CSS Animations
Animations may seem hard and difficult to the learning Web programmer, but they are amazing! Here is just a basic demo of them!
Setup
Create a new project. This will be a minimal HTML, CSS, and JavaScript project.
Delete everything in the <body> tag.
Animations
We are going to make an animation for fading in an element:
In the body, add a new div element with a class of fade-in:
<div class="fade-in">This will fade in</div>
Next, we need to add the css. To do it, go to the style.css file.
First, we just need to get our element:
.fade-in { /* Get all the elements with the class of "fade-in" */
/* code will be here */
}
Now, we need to call the animation. Replace the comment “code will be here” with this line of code:
/* Animation: name, speed, type, direction */
animation: fade-in 3s ease-in-out forwards;
There is one other line we need to add. This is going to be the styling BEFORE the element fades in:
opacity: 0; /* This will make the element disappear! */
So if you add all the code together for the CSS so far, you will have this:
.fade-in { /* get all the elements with the class of "fade-in" */
animation: fade-in 3s ease-in-out forwards;
opacity: 0; /* This will make the element disappear! */
}
Boom! Now that is complete, lets save and run our… uh-oh, we forgot the animation! Fear not! I can save us! We need more CSS!
Below the previous CSS code, we need to create a new keyframes animation. This is an animation that will change the styling over a period of time. For us, 3 seconds. To setup the keyframe animation, enter this code
@keyframes fade-in { /* create a keyframe animation */
}
Next, add the “from” and “to” elements in. Here is how that would look.
@keyframes fade-in { /* create a keyframe animation */
from {
}
to {
}
}
Boom. Good. Now, we need to start with the element faded out, so in the “from” section, add this line of code:
opacity: 0;
and then, we need to tell the code what we want to end at. So this will go in the “to” section:
opacity: 1;
So all together, our keyframe animation looks like this:
@keyframes fade-in { /* create a keyframe animation */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Now we are done with this program! Save and run the program (for other IDEs) and watch your element fade in!
so here is the cool part: it doesn’t have to be an opacity option! It can be ANY CSS class! If you want the color to change from red to blue, change the code:
Any lines with
opacity: 0;
Would change to
color: red;
and any lines with
opacity: 1;
would change to
color: blue;
And that is a basic tutorial in CSS animations.
Want to see CSS animations in action? Check out my portfolio where all the animations are CSS. You can also check out this screensaver I made where, of course, all the animations are CSS!
I hope you learned something from this tutorial. Did something not work? Do you have feedback or a comment? Just reply to this tutorial with it!
EDIT: If you want more on this topic, tell me below, or hearth this post!
MilesWK out!