CSS Animation: How to Make Things Move
Tags: css, animation
Published: 2018-06-13 07:44:18

---
title: CSS Animation: How to Make Things Move
published: true
description: This property is not that simple nor usual, but it is a Superstar among other properties.  
tags: CSS, animation.
---

The first step in using animation in CSS is [transition property](https://kolosek.com/css-transition/). When predefined transitions are not enough or just not suitable, there is CSS animation.  

**Note: No JavaScript is used in this post!** (even I believe this one is clear)

The animation property has 2 parts: keyframes and animation property. Keyframes define stages and styles of the animation and animation property assign keyframes to the element and specify how the animation will run out on the defined element.

## Keyframes
With defining keyframes you actually set steps for your animation. The syntax for this part of the animation is word `@keframes` followed with animation name followed by keyframe selectors and its style.

     @keyframes animation-name{
         0%{CSS}
         50%{CSS}
         100%{CSS}
     }
     
The animation is created by gradually changing from one to another style set by keyframe selectors. These selectors can have value 0%-100% (or words "from" and "to" which stand for 0% and 100%). I believe it is perfectly clear that 0% presents the beginning of the animation and 100% the end.

Properties you can animate are not infinite, so [there is a list of them](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties).

Now, the most shocking thing about the @keyframes option:
**`!important` in CSS inside of the keyframes does not only make your code important but it also ignores the whole code line...!shock**

## Animation Property
Once the keyframes are defined you better make sure that work pays off and use them. Inside of the selector you want to animate add `animation` property. This property is shorthand for eight animation properties.

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

**Main properties to add are `animation-name` and `animation-duration`. Without `animation-name` you can't link animation to keyframes and without `animation-duration` duration will be set to 0 and again, there is no animation.**

Other properties are used for better defining animation. `Animation-timing-function` specifies the speed curve of the animation. It can be defined with pre-defined values (linear, ease, ease-in, ease-out, ease-in-out) or custom defined with [steps](https://designmodo.com/steps-css-animations/) or [cubic-bezier](http://cubic-bezier.com/#.17,.67,.83,.67) values.

`Animation-delay` property works pretty same as in [transition](https://kolosek.com/css-transition/)一it defines the start of the animation.

By default, the animation will be played one time. With `animation-iteration-count` you can change this to any number or define it as `infinite`.

`Animation-direction` property specifies animation cycle一whether it will be played forwards, backward or in alternate cycles. Options that define those states are `normal`, `reverse`, `alternate` (forward then backward) and `alternate-reverse` (backward then forward).

`Animation-fill-mode` property defines a style of the element when the animation ends or before it started. The default state is `none` and in this state animation will not apply any styles to the animated element. The option `both` will set the first keyframe value to the element until it starts, and last keyframe value after it ends. Options `forwards` and `backwards` defined separated options from `both`.  

And finally, with `animation-play-state` you can pause the animation and play it again. So, it has 2 option, `running` (which is default) and `paused`.

*Even `animation` property is shorthand for all listed options, it is common to use it just for `animation-name` and `animation-duration` and other properties list separated.*  

     animation: icon-animation 2s;
     animation-timing-function:ease;
     animation-delay: 5s;
     animation-iteration-count:infinite;
     animation-direction:normal;
     animation-fill-mode:both;
     animation-play-state:running;
     

Just for the record, it is possible to add more than one animation to the element.

And just a short note about [prefixes](https://kolosek.com/understanding-css-vendor-prefixes/): with all animation properties and keyframes you should use `-webkit-`. For few specific known issues check [caniuse](https://caniuse.com/#feat=css-animation).

## Examples
The animation to itself is not really a thing that has a specific purpose in the design. On the other hand, it can be used wherever, and it will always add a value. I will say that specific animation (defined with this property) is used on the special effects the most, and animation defined with the transition is used on more common elements like hover and other states.

Also, some effects on hover effect, even just a line with unusual behavior is defined with animation property.

So, if you need to add "that something" to your already finished design, you add a special effect in the background or on some specific elements (loader, scroll, hover...).

A nice blog with a much nicer post with the nicest CSS animation examples: https://www.creativebloq.com/inspiration/css-animation-examples.

## Epilogue
The animation property is, in my opinion, one of the highest CSS properties so if not because the wow effect, you need it to your "master CSS" goal. If you are interested in UX (if not you maybe should be), check out [a very nice text about animation from invisionapp team](https://www.invisionapp.com/blog/importance-good-animation-ux/). 

If you need a hand with using this CSS property be sure to reach out to Kolosek team. You can find our designers via [Kolosek's Twitter account](https://twitter.com/kolosekit) or by sending an email to office@kolosek.com. They can't wait to hear your idea!

This article is originally published at [Kolosek Blog](https://kolosek.com/css-animation/).