Using Percentages in CSS Animations
Another tutorial by MilesWK
Note: This is a smaller “Part 2” to my original CSS animation tutorial. I will make a wayyyy bigger one soon, but this is a critical thing that I want to explain before I move on to more advanced stuff! If you have not seen the first CSS Animation tutorial, check it out here!
Disclaimer: Math is talked about, and referred to. If you are a hater of math, stop here… unless you really want to code animations. In that case… read on!
Percentages!
So, we know how to use from{} and to{} to do animations, but what if you want to make a seamless looping animation that would fade the element in, and then fade it back out, and do that over and over again!
Use the same code from the last tutorial, but get rid of all the @keyframe animations. To have this as all of our CSS:
.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! */
}
Now, to make it go forever, we need to edit the animation: line of code:
animation: fade-in 3s ease-in-out forwards infinite /* We add the "infinite to make it do our animation for ever! */
Great! Now we need the animation!
First… the SETUP…
@keyframes fade-in{
}
Now, I know what you are thinking: “Now we add a from loop and a to loop and we add in…” BUT HOLD YOUR HORSES! Since we want 3 changes to happen. We want the opacity to go from 0, to 1, and then BACK to 0. So instead, we need percentages!
For those who do not know what a percentage is, I tried typing out an explanation, but I couldn’t figure out how to explain it, so I will just explain as I go through the code…
So INSIDE the keyframe animation, we are going to add this:
0% { /* 0% is when none of the animation has been run */
}
50% { /* 50% is halfway through the animation. If there are 100 frames in this animation, 50 of them have been played. */
}
100% { /* This is acting as the "to" in from-to animations. If we had 100 frames, all 100 would be played. */
}
Great! Now we need to setup our 0%. In this, we want to tell the computer to set the opacity to 0:
0%{
opacity: 0;
}
That was easy! Now, halfway through the animation, we want to fade the element in, meaning our opacity needs to be set to 1:
50%{
opacity: 1
}
Great! Now, we need to set it back to 0 so when we come back to the 0%, it doesn’t “teleport” or “glitch” back to the opacity being 0:
100%{
opacity: 0;
}
Now, our keyframes animation looks like this:
@keyframes fade-in{
0% { /* 0% is when none of the animation has been run */
opacity: 0;
}
50% { /* 50% is halfway through the animation. If there are 100 frames in this animation, 50 of them have been played. */
opacity: 1;
}
100% { /* This is acting as the "to" in from-to animations. If we had 100 frames, all 100 would be played. */
opacity: 0;
}
}
Now, if you ran this in the same file as Part 1, then you should have the element fade in, and fade back out!
Now if you wanted more, lets say you wanted 10 changes, then you would have a 0% loop, a 10% loop, a 20%, loop, and so on until you get to 100%!
I hope you found this helpful! I will make a bigger, better one later, but you need to know this before Part 3 (coming soon)
Get out there, and do some coding! Share your projects using CSS animations below!