Web Development
Animation in CSS

Animation in CSS

Jeevan Henry Dsouza's photo
Jeevan Henry Dsouza
·

2 min read

Table of contents

Transitions

  1. transition-property: The name of the CSS property to transition.

  2. transition-duration: How long the transition should take.

  3. transition-timing-function: How the transition should progress. This can take a variety of keyword values, such as linear and ease-in , or custom values using the cubic-bezier() or steps()

  4. transition-delay : How long to wait before starting the transition.

Alternatively, the property can be used as a shorthand for all of these values. The first time value will be used for the duration, and the second will be used for a delay. Other than that, the order does not matter.

Animations

A css module for animating properties, very similar to , but with a bit more control. An animation is defined using properties :

  1. animation-name : The name of the keyframes animation.

  2. animation-duration : How long the animation should take.

  3. animation-fill-mode: If the element should stay in its animated position after the animation completes or if it should move to the starting position of the animation before it begins, specified with the backwards and forwrad values respectively both to follow the rules of both values.

  4. animation-direction: If the animation should play in normal or reverse order. A value of can also be used to switch between normal and reverse, or alternate-reverse can be used to do the same, but starting with the reverse direction.

  5. animation-iteration-count: How many times to run the animation, or infinite to run the animation indefinitely.

  6. animation-play-state: If the animation is currently running or . This is particularly useful for pausing an animation using JavaScript.

  7. animation-timing-function: How the animation should progress through the keyframes. This can take a variety of keyword values, such as linear and ease-in, or custom values using the cubic-bezier() or steps() function

  8. animation-delay: How long to wait before starting the animation.

Alternatively, the animation property can be used as a shorthand for all of these values. The first time value will be used for the duration, and the second will be used for a delay. Other than that, the order usually will not matter assuming the animation-name is not using a conflicting keyword with another possible value.

CSS