A CSS Animations Tutorial

A CSS Animations Tutorial | animation Property in CSS Definition & Example | List of CSS Animation Properties

by

In this tutorial, we will be learning completely about CSS Animations. This CSS Animations Tutorial covers basic details like definitions, animation property, and some other mostly used CSS Animation Properties along with JavaScript events for CSS Animations. Simply press on the links available here and understand the concept easily.

What are CSS Animations?

Basically, Animation allows an element to constantly change from one style to another style. So, you can alter as many CSS Properties as many times according to your requirement. In order to utilize CSS Animation, you should define a few keyframes for the animation at first. Keyframes include what styles the element will have at specific times.

animation Property in CSS

The CSSanimation property can be applied to animate several other CSS properties like color, background-color, height, or width. Each animation requires to be determined with the @keyframes at-rule which is then known with the animation property, like so:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

CSS Animation Properties

The illustrated table offers you to check out the CSS Animation Properties:

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards, or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

Do Read:

Animation Shorthand Property

Let’s consider the below example which uses six of the CSS animation properties to animation shorthand property:

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Now, you can get the same effect by applying the shorthand animation property:

div {
  animation: example 5s linear 2s infinite alternate;
}

JavaScript events for CSS Animations

With the help of JavaScript, you can accept and perform the following events:

  • animationstart
  • animationend
  • animationiteration

Pay attention withanimationstart, as it starts on page load then you can always execute your code of javascript after the processing of the CSS. Hence the animation is previously commenced and you can’t stop the event.

const container = document.querySelector('.container')
container.addEventListener(
  'animationstart',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationend',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationiteration',
  (e) => {
    //do something
  },
  false
)

Which Properties You Can Animate using CSS Animations?

The following list of properties can be animated with the help of CSS Animations. Take a look at the provided list:

  • background
  • background-color
  • background-position
  • background-size
  • border
  • border-color
  • border-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-width
  • border-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-width
  • border-spacing
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-width
  • bottom
  • box-shadow
  • caret-color
  • clip
  • color
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-width
  • columns
  • content
  • filter
  • flex
  • flex-basis
  • flex-grow
  • flex-shrink
  • font
  • font-size
  • font-size-adjust
  • font-stretch
  • font-weight
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-column
  • grid-gap
  • grid-row-end
  • grid-row-gap
  • grid-row-start
  • grid-row
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows
  • grid-template
  • grid
  • height
  • left
  • letter-spacing
  • line-height
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • order
  • outline
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • perspective
  • perspective-origin
  • quotes
  • right
  • tab-size
  • text-decoration
  • text-decoration-color
  • text-indent
  • text-shadow
  • top
  • transform.
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index