CSS Animation Tutorial
Let's dive in.
Go ahead and create a new HTML, CSS, and JS repl. After you created one, you should see three files. You can delete all of them except for
index.html. Anyways, go ahead and change the code to this:
This should render a black circle on the page.
Now, let's start animating. CSS animations are all about
to, that is, moving from one place to another. To use CSS animations, you'll need an
@keyframes name, and put it in the
<style> tags. I'll call mine animator. (I'm not going to include the entire html, but from now on, I'll just show you only the CSS (the part inside the
<style> tags.)) Then, we'll add the
to. Now the CSS looks like this:
from is what we start with. The background color is black. And the
to is what we end up with. We change the background color to red. So now we have this animation thingy. What do we do with it? Well, it's like any other language. We can say that the
animator is like a method. It's useless if we don't call it. To call it, we call the animation name, and the animation duration (note that when the animation is complete, it will change back to its initial state):
So, I called the animation, and it takes 3 seconds for the animation to complete. Try it out!
Yay, we create are first animation!! Well, more like transition. Let's dig deeper.
So, now that we've created are first transition, let's make it a bit fancier. Let's add percentages to it. Basically, at a certain a certain point during the animation, something happens. We can do this with the
% sign. So let's say, when the animation is 0% through (the starting point), it's black. When the animation is 25% through, let's change the background color to green. When the animation is 50% thghough, let's change the background color to yellow. When the animation is 75% through, let's cahnge the background color to blue, and finally, when the animation is at 100%, let's change the background color to red. Let's see what that looks like (I changed the animation duration to 5 seconds):
Beautiful. But that's just transitions.... didn't you say animations???
Now for the fun part...
Now that we know how to make nice color transitions, let's make stuff move! And trust me, it isn't that complicated. Basically, we set the initial position of an object, and set the following position(s) of the object. It's sort of like plotting points. Let's do this!
IMPORTANT: Make sure you set the position to relative, or your circle will not move.
Try it out! Now we have this beautiful circle changing colors and moving in the shape of a square. But what if you want to delay the animation?
Delaying a CSS animation is very easy. Simply add
animation-delay to your CSS, like this (this is only the div CSS section):
What this does is wait a certain amount of time (in this case, 3 seconds) after the page loads until the animation starts. You can also set negative values to make the animation in progress upon page load.
So, we know how to make an animation now. Can we make it run again and again? Yes! And it's very easy. Just add
animation-iteration-count to your div properties, followed by a number. For example, if we want the animation to repeat 5 times:
You can also set the count to
You can run an animation backwards by adding
animation-direction: reverse;. Here are several types of animation direction:
normal- Runs an animation in the regular way. The default.
reverse- Runs an animation backwards.
alternate- Animation first played forward, then backward.
alternate-reverse- Backwards first, then forwards.
Animation speed curve
You can make the speed of an animation have a curve to it by adding the
animation-timing-function property to your div. Here are some values you can give it:
ease- Slow start, then fast, then end slowly (default)
linear- Same speed from start to end
ease-in- Slow start
ease-out- Slow end
ease-in-out- Slow start and end
cubic-bezier(n,n,n,n)- Define your own values
The end for now
This is the end of my CSS animation tutorial. I hope you liked it and learned how to ainimate with CSS. I learned (and took) a lot of stuff from w3schools. You can learn a lot more CSS animations here.
Here's something I made with only HTML and CSS!! Challenge: Try giving the ball a shadow.