Animation CSS 
Tags: css, beginners, webdev, devops
Published: 2019-12-28 17:34:06


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2kgkfo5lrrs6jv7ipzi4.png)
Animation
=========
	°animation-name
	°animation-duration
	°animation-timing-function
	°animation-delay
	°animation-iteration-count
	°animation-direction
	°animation-fill-mode
	°animation-play-state
_Animation-name_
----------------
It's the name you put into effect 

_Animation-duration_
--------------------

This property specifies the length of time that the animation takes to complete one cycle. 

Syntax
------
animation-duration: 6s;

Values
------
*time (s-ms) 
Defines the time offset before the animation begins.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mgfsl5j5psylq9psk8ku.jpg)

{% vimeo 376583683 %}


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kqc3ggldt9hfo1m382ks.jpg)

{% vimeo 376679643 %}

_Animation-timing-function_
---------------------------
The property sets how an animation progresses through the duration of each cycle.

Syntax
-----
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

Values
----
1-

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kzptra25btxqqvwi4mai.png)

The animation starts slowly, accelerates in the middle and slows down at the end.

2-

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/06vp1bxoz4jbplub6g6e.png)

The animation starts slowly and accelerates gradually until the end. 

3-

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pjaqhwizr5yevb416njh.png)

The animation starts quickly and decelerates gradually until the end.

4-

 ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1die5f3uhx1dyt7yezrr.png)

The animation starts quickly and decelerates gradually until the end. 

Ease-out vs ease-in-out
The speed of ease-in-out longer than the speed of ease-out. 

5-

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nitl3bs27ztrqolbodrn.png)

The animation has a constant speed. 


6-



![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z4r6szlg99jmvyxegvlo.png)

The animation jumps instantly to the final state. 

7-


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hith0d0fwer8fguof289.png)

The animation stays at the initial state until the end when it instantly jumps to the final state.

8-

 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x6v0p77iquq1fc4preez.png)

By using _steps()_ with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.


_animation-delay_
------------------
This feature is the delay of the start of movement when the cycle begins

Syntax
-------
animation-delay: 3s;

Values
------
*time
Defines the time offset before the animation begins.

Example
--------

{% vimeo 381774283 %}

_animation-iteration-count_
---------------------------
This property calculates the number of repetitions of a single cycle



Syntax
------
animation-iteration-count: infinite;
animation-iteration-count: 3;

Values
-----
*infinite
The animation will repeat forever.

*time
Defines the time offset before the animation begins.

Example
-------

{% vimeo 381775640 %}

_animation-direction_
---------------------
The property sets whether an animation should play forwards, backwards, or alternating back and forth.


Syntax
-------
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;


Values
------
*normal
*reverse
*alternate
*alternate-reverse

Example 
-------
1- Normal
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l0rn7m6w466ev9kmovlv.png)

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

2- Reverse

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/uuzrx0nmonr0xgh45e0x.png)

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.


3- Alternate

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wu9x39h8iq9510oqwd7a.png)

The animation is played forwards first, then backwards:

-starts at the first keyframe
-stops at the last keyframe
-starts again, but at the last keyframe
-stops at the first keyframe

4- Alternate-reverse

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2fu8zhqiss74ztvuwve3.png)
The animation is played backwards first, then forwards:

-starts at the last keyframe
-stops at the first keyframe
-starts again, but at the first keyframe
-stops at the last keyframe

_animation-fill-mode_
---------------------
This feature works after the session has ended by returning the item to its starting location or remaining in its place

Syntax
-------
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;


Values
------
*none
*forwards
*backwards
*both


Example
-------
1- None

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x95zsreobp0jxtdlm2m1.png)

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

2- Forwards

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oopdv2hk15hcv1nr45zt.png)

The last styles applied at the end of the animation are retained afterwards.

3- Backwards

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c57tk3yd06s6mzz6psdq.png)

The animation's styles will already be applied before the animation actually starts.

4- Both

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o78rvuvxhkrf0nzk4r1g.png)
The styles are applied before and after the animation plays.

_animation-play-state_
----------------------
The property sets whether an animation is running or paused.

Syntax
-----
animation-play-state: running;
animation-play-state: paused;

Value
-----
*running
*paused

Examples:
---------
1. Flying Birds

{% codepen https://codepen.io/matchboxhero/pen/RLebOY %}

2. Falling Snow

{% codepen https://codepen.io/matchboxhero/pen/JrLJeb %}

Sources
_______

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://www.quackit.com/css/css3/properties/css_animation.cfm


https://cssreference.io/animations/