CSS tutorial series: CSS Animation

#beginners #css #webdev #tutorial

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