Skip to content
Sign upLog in
← Back to Community

CSS Animation Tutorial

Profile icon
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:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS Animations</title> <style> div { width: 100px; /*This sets the width... obviously*/ height: 100px; /*And this sets the height*/ border-radius: 50%; /*This makes the div a circle*/ background-color: black; /*This makes the circle black*/ } </style> </head> <body> <div><div/> </body> </html>

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:

div { width: 100px; height: 100px; border-radius: 50%; background-color: black; } @keyframes animator { from {background-color: black;} to {background-color: red;} }

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):

div { width: 100px; height: 100px; border-radius: 50%; background-color: black; animation-name: animator; animation-duration: 3s; } @keyframes animator { from {background-color: black;} to {background-color: red;} }

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):

div { width: 100px; height: 100px; border-radius: 50%; background-color: black; animation-name: animator; animation-duration: 5s; } @keyframes animator { 0% {background-color: black;} 25% {background-color: green;} 50% {background-color: yellow;} 75% {background-color: blue;} 100% {background-color: red;} }

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.

div { width: 100px; height: 100px; border-radius: 50%; background-color: black; position: relative; /*Postion set to relative*/ animation-name: animator; animation-duration: 4s; } @keyframes animator { 0% { background-color: black; left: 0px; top: 0px; } 25% { background-color: green; left: 200px; top: 0px } 50% { background-color: yellow; left: 200px; top: 200px; } 75% { background-color: blue; left: 0px; top: 200px; } 100% { background-color: red; left: 0px; top: 0px; } }

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):

div { width: 100px; height: 100px; border-radius: 50%; background-color: black; position: relative; animation-name: animator; animation-duration: 4s; animation-delay: 3s; /*The animation delay*/ }

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:

div { width: 100px; height: 100px; border-radius: 50%; background-color: black; position: relative; animation-name: animator; animation-duration: 4s; animation-delay: 3s; animation-iteration-count: 5; /*Sets how many times the animation repeats*/ }

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.

Voters
Profile icon
KEVINCHEN172
Profile icon
KellyAmador
Profile icon
SumaitaAlam
Profile icon
Lachlan000
Profile icon
KarsenKras
Profile icon
amaimai
Profile icon
ch1ck3n
Profile icon
Aivoybia
Profile icon
ruiwenge2
Profile icon
WillDev89
Comments
hotnewtop
Profile icon
Coder100

position absolute should be better for the job of well, absolutely positioning!

Profile icon
codingjlu
Profile icon
Coder100
Profile icon
codingjlu

@Coder100
If you just get 4043 more cycles, you'll be 55555!

Profile icon
Coder100
Profile icon
ruiwenge2

the basketball animation was cool! Just that it keeps on missing :(

Profile icon
codingjlu
Profile icon
MalvolioGood

Thanks.

Profile icon
Aivoybia

69 upvotes nice

Profile icon
AliceMorgan
Profile icon
codingjlu

@AliceMorgan
what the?

Profile icon
LeXuanXuan1

Hi, first off, I would like to say thank you for the tutorial, it really was really helpful. However, when I tried the code, there was a kinda shadow/ clone following the animation, so I was hoping someone could help check the code to see what was wrong with it, I pasted it below. Thanks!(P.S. Ignore the backslashes, they're just there to keep the code in order)
/
/
/
/
/
CSS Animations
div { width: 100px; height: 100px; border-radius: 50%; background-color: black; animation-name: animator; animation-duration: 3s; position: absolute; } @keyframes animator {
0% {
background-color: black;
left:0px;
top:0px;
}
25% {
background-color: green;
left:20px;
top:12px;
}
50% {
background-color: yellow;

} 75% { background-color: blue; } 100% { background-color: red; } }

/
/
/
/


/
/

Profile icon
codingjlu

@LeXuanXuan1
great question. Admittedly, I've encountered the exact same problem, and I still don't know how to solve it. However, I went onto w3schools and copied their div... I couldn't tell the difference, but it worked! Just try it:

<div></div>

If that doesn't work, try copy and pasting it from this link:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation5

This question has confused me unbelievably as well. If someone could help, that would be awesome.

Profile icon
LeXuanXuan1

@codingjlu
I copied the code, and now it works! Thanks!😃

Profile icon
codingjlu

@LeXuanXuan1
lol I have no idea why...

Profile icon
cornflakes2

good bro

Profile icon
CyberDaDev

ahh finally an actually not that boring straight forward tutorial thx bro

Profile icon
codingjlu

@CyberHacker101
:P glad you liked it!

Profile icon
CyberDaDev

I just gave a updoot and forgot to read the actual thing so bro do u know wats happening with python with turtle my repl wont use ma code here's the link if u wanna see

@codingjlu

Profile icon
codingjlu

@CyberHacker101
isn't that a website with a video (not a python + turtle repl)? What's the problem?

Profile icon
CyberDaDev

Yeah it was a rickroll lol but i do actually need help with the python with turtle thing i dont exactly remember wat i did (it was like 6 mounths ago oof) here's PLZ DONT MESS ANYTHING UP OOOOOGA

@codingjlu

Profile icon
CyberDaDev

Ah wait nvm ima abandon the project i made the most stupidest and most nub mistake ever possibe DONT GO TO THE LIKE FOR THE SAKE OF UR EYES

@codingjlu

Profile icon
codingjlu
Profile icon
codingjlu

@CyberHacker101
sorry I don't know Python with turtle...

Profile icon
CyberDaDev

breh momentum

@codingjlu

Profile icon
codingjlu
Profile icon
CyberDaDev

?i dont know what you dont know of wat i dont know

@codingjlu

Profile icon
codingjlu
Profile icon
CyberDaDev

okay to wat??

@codingjlu

Profile icon
codingjlu

@CyberHacker101
what you said...

Profile icon
CyberDaDev

Im like coming in every morning and see these random comments i have no clue wat they mean

@codingjlu

Profile icon
codingjlu
Profile icon
CyberDaDev

wat do i respond to a "lol" reply?

@codingjlu

Profile icon
codingjlu
Profile icon
CyberDaDev

I still dont know what your talking about bro

@codingjlu

Profile icon
CATSAG7PRO

super good

Profile icon
uhevie

COOL MAN

Profile icon
cannonthepom123

i tryed a rotation animattion that makes button spin but it wont move what did I do wrong here is my code
#big */the circle with text I want to spin/* { border-radius: 50%; background-color: red; height: 70px; width: 70px; align-content: center; text-align: center; animation-name: spinSpin; animation-duration: 3s; animation-delay: 3s; } @keyframes spinSpin { 25% {translate: rotate(90deg); } 50% {translate: rotate(180deg); } 75% {translate: rotate(270deg); } 100%{translate: rotate(360deg); } }

Profile icon
codingjlu

@cannonthepom123
Can I see your entire code? Also, it's hard to read that way... instead of using backticks ` use three backticks in a row, followed by your language, then close with three.
Example:
```css
// code here blah blah blah
```

Profile icon
codingjlu

@cannonthepom123
So I found your problem: You have to set the position to relative by adding position: relative;, like this:

#big { border-radius: 50%; background-color: red; height: 70px; width: 70px; align-content: center; text-align: center; position: relative; /*The most important!! This should fix your problem*/ animation-name: spinSpin; animation-duration: 3s; animation-delay: 3s; }
Profile icon
cannonthepom123

@codingjlu

oh ok thx

Profile icon
cannonthepom123
Profile icon
cannonthepom123

@codingjlu

#big */the circle with text I want to spin/* { border-radius: 50%; background-color: red; height: 70px; width: 70px; align-content: center; text-align: center; animation-name: spinSpin; animation-duration: 3s; animation-delay: 3s; } @keyframes spinSpin { 25% {translate: rotate(90deg); } 50% {translate: rotate(180deg); } 75% {translate: rotate(270deg); } 100%{translate: rotate(360deg); } }```
Profile icon
codingjlu

@cannonthepom123
Did it work? By the way, when you want to comment in CSS, it's /*comment*/ not /*comment/*

Profile icon
cannonthepom123

@codingjlu
YES I DID WORK!!
TSYM

Profile icon
codingjlu
Profile icon
jayhwang

nice

Profile icon
Adam1959vip

LOL guys

Profile icon
codingjlu

@Adam1959vip
Lol what?

Profile icon
Adam1959vip

Lol

Profile icon
Adam1959vip

Wow

Profile icon
tussiez
Profile icon
Kookiez

I'd recommend doing your CSS in the .css file, not in a <div>. But other than that, good job!

Profile icon
codingjlu

@Kookiez
What do you mean...

Profile icon
Kookiez

@codingjlu
this file:

image

Profile icon
codingjlu

@Kookiez
yeah I usually put it inside the style tags and move it into a separate file later. I guess it makes the load faster...