CSS Animation Tutorial
codingjlu

Take 10 minutes and read this tutorial. Then you will know how to animate with CSS!! And best of all, you barely need any CSS and HTML knowledge, and this tutorial doesn't have a single drop of javascript. Since this is so exciting, I'll skip all the boring stuff. 😁

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.

Transitions

Now, let's start animating. CSS animations are all about from and 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 from and to. Now the CSS looks like this:

The 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.

Animation percentages

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...

Moving objects

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?

Animation delay

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.

Animation repeat

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 infinite.

Animation reverse

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.

New

Here's something I made with only HTML and CSS!! Challenge: Try giving the ball a shadow.

You are viewing a single comment. View All
cannonthepom123