Are you learning CSS animations for the first time? Perhaps you are already familiar with CSS transitions. But even if it's not, then this tutorial is for you.


<hr />

Examples in this tutorial will be based around following setup:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1604073200251/RWgprBHZu.png" alt="image.png" />
Let's take a look at the above figure.
Soon as <code>.animateClass</code> is assigned to element animation will start playing, transforming all properties of that element to target values specified in keyframes rule. To remove animation, remove <code>.animateClass</code> from element.
The class is linked to <code>animationName</code> keyframes by using <code>animation-name</code> property. Value must match the name specified by <code>@keyframes</code> rule. This animation is set to last <code>3</code> seconds or <code>3000ms</code> as specified.
Read the rest of this tutorial at <a target="_blank" href="https://semicolon.dev/tutorial/css/css-animation-tutorial">the complete css animation tutorial</a> .

Are you learning CSS animations for the first time? Perhaps you are already familiar with CSS transitions. But even if it's not, then this tutorial is for you.





<hr>

Examples in this tutorial will be based around following setup:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604073200251/RWgprBHZu.png)

Let's take a look at the above figure.

Soon as ```.animateClass``` is assigned to element animation will start playing, transforming all properties of that element to target values specified in keyframes rule. To remove animation, remove ```.animateClass``` from element.

The class is linked to ``` animationName``` keyframes by using ```animation-name``` property. Value must match the name specified by ``` @keyframes``` rule. This animation is set to last ```3``` seconds or ```3000ms``` as specified.

Read the rest of this tutorial at [the complete css animation tutorial](https://semicolon.dev/tutorial/css/css-animation-tutorial) .

Thumbs Up

Love

Party

Unicorn

Clap

Beer

Trophy

Heart Eyes

Take my Money

Rocket

Wow! This article is super detailed. Thanks for sharing.

Wow! This article is super detailed.  Thanks for sharing.

Thanks for creating an opportunity to be read.

Thanks for creating an opportunity to be read.

I hear JS Tut likes to stuff things in his bung-hole.... and he has sex with his cat.

I hear JS Tut likes to stuff things in his bung-hole....  and he has sex with his cat.

Amazing article. Thanks for sharing.

Thanks. I have just followed you:)

Surely after she figures out that you&#39;re a stalker she will quit following you.

Surely after she figures out that you're a stalker she will quit following you.

Powerful article, really appreciate the helpful explanations you gave for the animation properties.

Powerful article, really appreciate the helpful explanations you gave for the animation properties.

He keeps recycling this content year after year, neverminding the fact that he jerks off to your Twitter profile image while you comment.

He keeps recycling this content year after year, neverminding the fact that he jerks off to your Twitter profile image while you comment.

JavaScript Teacher

CSS Animation Tutorial