Learn to Code via Tutorials on Repl.it!

← Back to all posts
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.

Voters
ch1ck3n
Aivoybia
ruiwenge2
WillDev89
EmilieBrock
KevinMunoz4
ANDREWVOSS
cesardegrote
MichaelMerrill1
maxina
Comments
hotnewtop
Aivoybia

69 upvotes nice

ruiwenge2

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

codingjlu
AliceMorgan

google

GOOGLE

[[https://www.google.com google]]

custom text link

<a href="https://www.google.com">google</a>

[url=https://www.google.com]google[/url]

link text

"foo":"https://www.google.com"

[http://www.example.com example]

Link

This link

codingjlu

@AliceMorgan what the?

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)
/<!DOCTYPE html>
/<html>
/ <head>
/ <meta charset="utf-8">
/ <meta name="viewport" content="width=device-width">

/ </style>
/ </head>
/ <body>
/ <div><div/>
/ </body>
/</html>

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:

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.

LeXuanXuan1

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

codingjlu

@LeXuanXuan1 lol I have no idea why...

cornflakes2

good bro

CyberHacker101

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

codingjlu

@CyberHacker101 :P glad you liked it!

CyberHacker101

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

codingjlu

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

CyberHacker101

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

CyberHacker101

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

codingjlu
codingjlu

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

CyberHacker101

breh momentum @codingjlu

codingjlu
CyberHacker101

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

codingjlu
CyberHacker101

okay to wat?? @codingjlu

codingjlu

@CyberHacker101 what you said...

CyberHacker101

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

codingjlu
CyberHacker101

wat do i respond to a "lol" reply? @codingjlu

codingjlu
CyberHacker101

I still dont know what your talking about bro @codingjlu

CATSAG7PRO

super good

uhevie

COOL MAN

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); } }

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

codingjlu

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

cannonthepom123

@codingjlu
oh ok thx

cannonthepom123
cannonthepom123

@codingjlu

codingjlu

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

cannonthepom123

@codingjlu YES I DID WORK!!
TSYM

codingjlu
jayhwang

nice

Adam1959vip

LOL guys

codingjlu

@Adam1959vip Lol what?

Adam1959vip

Lol

Adam1959vip

Wow

tussiez
Kookiez

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

codingjlu

@Kookiez What do you mean...

Kookiez

@codingjlu this file:

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

Kookiez

@codingjlu eh, i like using .css files because its easier (for me) and not as...messy?

codingjlu

@Kookiez Yeah sure... I guess... I mean it doesn't matter that much

zplusfour

this is awesome

novelboy

Great tutorial! Can't wait to try this out

Coder100

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

codingjlu
Coder100
codingjlu

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

Coder100

indeed @codingjlu

codingjlu

Sorry, the format is really weird.

GyanChande

@codingjlu
I am new to CSS animations, but is there a way to animate images?

codingjlu

@GyanChande Yes. What do you mean though? Like making images fly in from the right or more of like turning it into a video?

GyanChande

@codingjlu
I mean like for example I have a pikachu gif. I want to put it in and animate it.

GyanC39

@GyanChande
Oh never mind I did it.

codingjlu

@GyanChande Sure you can! Check out the repl I at the end of this tutorial (I just added it). The trick is to use multiple images.

uhevie