CSS Animation

CSS/CSS Animation

CSS Animations are a great way to create visual animations, not limited to a single movement like CSS Transitions, but much more articulated. Animation is applied to an element using the animation property.

.container {

 animation: spin 10s linear infinite;

}

spin is the name of the animation, which we need to define separately. We also tell CSS to make the animation last 10 seconds, perform it in a linear way (no acceleration or any difference in its speed), and repeat it infinitely. You must define how your animation works using keyframes. Example of an animation that rotates an item:

@keyframes spin {

 0% {

 transform: rotateZ(0);

 }

 100% {

 transform: rotateZ(360deg);

 }

}

Inside the @keyframes definition, you can have as many intermediate waypoints as you want. In this case, we instruct CSS to make the transform property rotate the Z axis from 0 to 360 grades, completing the full loop.

The CSS animation properties offer a lot of different parameters you can tweak:

animation-name is the name of the animation, it references an animation created using @keyframes animation-duration how long the animation should last, in seconds.

animation-timing-function the timing function used by the animation (common values: linear, ease). Default: ease

animation-delay an optional number of seconds to wait before starting the animation

animation-iteration-count how many times the animation should be performed. Expects a number, or infinite. Default: 1

animation-direction the direction of the animation. Can be normal, reverse, alternate, or alternate-reverse. In the last 2, it alternates going forward and then backward

animation-fill-mode defines how to style the element when the animation ends after it finishes its iteration count number. none or backward go back to the first keyframe styles. forwards and both use the style that's set in the last keyframe

animation-play-state if set to pause, it pauses the animation. Default is running.

The animation property is a shorthand for all these properties, in this order:

 .container {

 animation: name duration timing-function delay iteration-count direction

 fill-mode play-state;

}

JavaScript events for CSS Animations

Using JavaScript, you can listen for the following events:

• animationstart
• animationend
• animationiteration

Be careful with animationstart because if the animation starts on page load, your JavaScript code is always executed after the CSS has been processed, so the animation is already started and you cannot intercept the event.

<script>

  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

)

 </script>

Which Properties You Can Animate using CSS Animations

A lot! They are the same you can animate using CSS Transitions, too. some of the list here’s:

• background
• background-color
• background-position
• background-size
• border
• border-color
• bottom
• box-shadow
• caret-color
• clip color
• column-count
• content
• filter
• flex
• flex-basis
• flex-grow
• flex-shrink
• font
• font-size
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid
• height
• left
• letter-spacing
• line-height
• margin
• opacity
• order
• outline
• padding
• perspective
• perspective-origin
• quotes
• right
• tab-size
• text-decoration
• top
• transform
• vertical-align
• visibility
• width
• word-spacing
• z-index