Full CSS animations guide which allows you to build amazing websites

This article was originally posted at CSS Animations Cheatsheet

---

Since we can create animations in CSS, building a stunning website with smooth transitions and nicely moving elements should not be difficult. It’s a great chance to add some amazing effects to the design of your website and make it remembered by the clients or recruiters. It’s always a great option to stand out from the crowd of other developers' portfolios.

You don't have to rebuild half of your website; sometimes, it's enough to add one or two effects to make the design more vivid and exciting. But remember to find a sweet spot to avoid creating a little, slow monster from your website.

In this article, I would like to go through the most critical aspects of creating animations in CSS. I also build a small bonus project using CSS animations, which I will add at the end of this article.

In this guide, I'll get through the following aspects:

1. Animation properties
2. Keyframes
3. Creating animation in CSS
4. Loader project

Let’s start.

Animation properties

Setting an animation is done by assigning animate property while styling the element or its sub-properties. That’s why to start creating awesome animations in CSS, you have to know how you can set the duration, timing, delay, and some more. To get familiar with them and understand what they are responsible for, let’s go one by one:

animation-duration - defines the time for a single cycle of animations, often set in s or ms, for example: animation-duration: 4s

animation-delay - defines the time between the end of loading the element and start of first animation cycle, it's also set as s or ms, for example: animation-delay: 2s

animation-iteration-count - defines how many time animation cycles will be repeated, it can be set to infinite if you want to have a never-ending animation, it’s set in numbers, for example: animation-iteration-count: 3

animation-direction - defines if the animation should change the direction on every run of the sequence or start in the same place every time after reset. It can be set as one of the following keywords:

normal (default) - animation is played forward form 0% to 100% after one cycle it starts from the beginning, which means 0% state

alternate - animation changes direction every cycle, so it starts at 0% to 100%, and the next cycle is from 100% to 0%

reverse - every time animation starts from the end, so it resets to 100% and go backward

alternate-reverse - animation alternates and reverse at once, which means that the first cycle is played from 100% to 0%, and the second one will be played from 0% to 100%

animation-name - defines the name of the @keyframe used in the animation

Those properties which I described above are the most popular and used the most often. But there are also a few less popular properties used to set animations. Let’s go through them as well:

animation-timing-function - defines the timing of the animation, which means establishing the acceleration curves to define transitions through the keyframes

animation-fill-mode - defines the values which are applied to the element before the animation and after it was executing

animation-play-state - allows to pause and restart the animation sequence

Now you already know what animation properties do, so we can go to the next step, which is @keyframe.

Keyframe

To define custom behavior for the element, you have to set a sequence, and for this, you will use @keyframe rule. In @keyframe, we specify the styling for the element in the particular time of rendering.

We are defining the styles for at least two steps 0%, which is the beginning state, and 100%, which is the final state. We can change 0% with the alias from and 100% with an alias to. Of course, there is a possibility to define more than two steps, so we are using percentage to define styling for each part of the animation cycle.

Let’s take a look at code example, where I defined a keyframe which change the height of the element:

@keyframe grow {
  0% { height: 20px }
  50% { height 60px }
  100% { height 100px }
}

So, in the code above, I created a keyframe called grow. It changes the height of the element from 20px at the beginning, then to 60px in the middle of the animation. And at the end to 100px.
In the next step, let's try to add animation to the element.

Creating the animation

We can create an animation using shorthand or assigning values to each property. To make it in one line, let's take a look which property takes which place:

animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

If you are a beginner, I think it will be much easier to assign values separately to each sub-property.
Also, it's worth remembering that animation-duration has to be set to make the animation work. If you don't do it, then you won't see the effect.

Let's try to set the animation from previous example:

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

In the code above, I just assigned an animation grow to the div element. The animation will last 5s per cycle and will start after 2 seconds from loading the element. It will repeat all the time as it’s set to infinite iteration. Easy, right?

Loader project

In the above steps, you've learned how to set an animation. I want to show you how to use animations in a real example. I created an element that every website and application needs, loader. There are a lot of possibilities to create a beautiful, colorful loader using CSS animations, and often you can adjust the loader to the logo or company branding.

As an example, I created an animated logo build from four squares, changing their height. I want to focus on animation-delay here to show you how you can add the same animation to a few elements and run it at different times.

As you remember, animation-delay decides how long we are going to wait until the animation starts after it's loaded. Please take a look at the example to see how it works on the real element.

Conclusion

In this article, I went through the most crucial information, which you need to build nice animations using only CSS. I explained what each sub-property of animation responsible for to give you an understanding of what should be set for a particular result are.

In the end, to show you a real-life example, I attached a simple loader build from four quarts and animated with CSS.

I hope you will find this article useful and will use it as a base to build your first animations. If you are already familiar with the animations and you did something nice, share it with us in the comments.

If you would like to learn more about CSS join us at Duomly!

Thank you for reading,
Anna from Duomly

Comments

[GibboK]

Hi Duomly, great article!

Just would like to mention two nice libraries for animations.
The first one based on CSS animations:

Animate.css: github.com/daneden/animate.css

The second based on Web Animations API which is basically a new JavaScript API for driving animated content on the web on which we no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction.

You can give it a try here (disclaim I wrote this library ):

Animatelo: github.com/gibbok/animatelo

[jean-smaug]

Hello,

Thx for your article.

Tip : instead of the height property, I think it's possible to have the same behaviour with the transform: scaleY() property. For better performances ;)

keycdn.com/blog/animation-performa...

[Robin Kretzschmar]

Animations were always those kind of tasks I avoided because I said to myself I simply wasn't good enough with this topic. After reading your amazing article, I see that I just didn't get the basic concept right and this gives me a fresh view on things to take another chance.

Thanks for the article! :)

[Zachary Eskridge]

This is awesome! I've actually been really curious about animation for a while now. I got some Stack Overflow coffee a while back for a simple animation on my portfolio, but I didn't really understand it well enough to replicate. But it makes more sense now. Thanks! Great read.

[Aslam Shah]

Adding animation-direction: alternate; will make it cooler :)

[James Sinkala]

Great article. Here is a css animation I created for my site:

[Mahmudul Hasan]

Can you show me the code?

[James Sinkala]

Here's a pen containing this - codepen.io/xinnks/pen/VwLmJjw

[Kyle Griffin]

Hi Sharjeel. Can you upload the image to imgur instead? I may be able to quickly tell you what the issue is, but the CSS animation guide here is better suited to those who are building up their CSS manually and not through the use of a Wordpress Builder.

[Evan Kapantais]

you could also do it like so, instead of typing out percentages.

@keyframe loading {
  from { height: 10px; }
  to { height: 29px; }
}

[Artistdesignzpro]

Nice

[Aleksandr Hovhannisyan]

The animation in your demo could use some work. The timing/sync is noticeably off.