DEV Community

Cover image for CSS tutorial series: CSS Animation
The daily developer
The daily developer

Posted on

CSS tutorial series: CSS Animation

You might've already come across animation on a website you previously visited and probably wondered how was it done.

Some animation require the use of javascript which we will get to in a later post but first let's discuss how to animate in CSS.

What is animation?

An animation is the gradual transition of an element's style to another using properties that sets the looks that the element will have at particular times.

How is animation done ?

In order for an animation to work it must first be connected to an element.

Property function value
animation-delay defines the delay of the start time of the animation. takes a value in seconds such as 2s
animation-direction defines if an animation is to be played forward or backward or even in cycles normal, reverse,alternate, alternate-reverse
animation-duration indicates how long should the animation last takes a value in seconds such as 5s
animation-fill-mode indicates how the element looks before and after it is applied none, forwards, backwards, both
animation-iteration-count indicates how many times the animation should be played takes either a number or the value infinite
animation-name defines a name that is used to select the @keyframes rule that specifies the animation none or custom-name
animation-play-state indicates whether to play or pause the animation paused, running
animation-timing-function determines how an animation develops over the course of each cycle ease, ease-in, ease-out, ease-in-out, linear

Let's discuss animation-fill-mode and animation-timing-function's property values

animation-fill-mode:

  • forwards will allow the element to keep the style values that were set by the last keyframe.

  • backwards will allow the element to get the styles set by the first keyframe and keep it during the delay period.

  • both The animation will follow rules for both forward and backward motion.

animation-timing-function:

  • linear allows the animation to retain the same speed from start to end.

  • ease allows the animation to start slow then speed up before ending slowly.

  • ease-in allows the animation to start slowly

  • ease-in-out allows the animation to have a slow start and end.

  • ease-out allows the animation to have a slow end.

Syntax

div {
  property: value;
  property: value;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
 from { property: value}
 to { property: value}
}
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
fullstackjo profile image
The daily developer

thank you!

Collapse
 
hirentimbadiya profile image
Hiren Timbadiya

great!!

Collapse
 
lotfijb profile image
Lotfi Jebali

Insightful!