DEV Community 👩‍💻👨‍💻

karim coda
karim coda

Posted on

Animation CSS

Alt Text

Animation

°animation-name
°animation-duration
°animation-timing-function
°animation-delay
°animation-iteration-count
°animation-direction
°animation-fill-mode
°animation-play-state
Enter fullscreen mode Exit fullscreen mode




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

Alt Text

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

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

2-

Alt Text

The animation starts slowly and accelerates gradually until the end.

3-

Alt Text

The animation starts quickly and decelerates gradually until the end.

4-

Alt Text

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

The animation has a constant speed.

6-

Alt Text

The animation jumps instantly to the final state.

7-

Alt Text

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

8-

Alt Text

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

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

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

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

2- Reverse

Alt Text

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

3- Alternate

Alt Text

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

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

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

3- Backwards

Alt Text

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

4- Both

Alt Text
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

  1. Falling Snow

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/

Top comments (0)

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt — available in multiple colors.