CSS - animation

The animation shorthand is a CSS property that makes it easier to apply animations between styles.

Constituent properties

This property is a shorthand for the following CSS properties:

Possible Values

The following is the list of all the possible values of animation shorthand property.

  • <single-easing-function> - Specifies the kind of transition. The value needs to be from the list of values in <easing-function>.

  • <single-animation-iteration-count> - The count of playbacks for the animation. The value needs to be among the options found in animation-iteration-count.

  • <single-animation-direction> - The animation's direction of playback. The value needs to be among those that animatiom-direction offers.

  • <single-animation-fill-mode> - Chooses the styles that should be applied to the target of the animation both before and after it is executed. The value has to come from the animation-fill-mode list.

  • <single-animation-play-state> - Determines if the animation is currently playing. One of the values in animation-play-state must be the value.

One or more single animation, separated by commas, make up the animation property.

Each animation property is defined as:

  • The <time> value occurs zero times, once or twice.

  • The following values occurs zero times or once

    • <single-easing-function>

    • <single-animation-iteration-count>

    • <single-animation-direction>

    • <single-animation-fill-mode>

    • <single-animation-play-state>

  • A name for the animation that is optional and can be <string>, <custom-ident>, or none.

Syntax

animation = <single-animation># 
<single-animation> = <time [0s,∞]> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

Applies To

All the HTML elements.

CSS animation - Basic Example

In the following example, a 5-second ease-in-out animation is used to produce a continuous alternate rising effect for a box element using the animation shorthand property.

<html>
<head>
<style>
   :root {
      overflow: hidden;
      background-color: lightcoral;
      display: flex;
      height: 400px;
      justify-content: center;
   }
   .box {
      background-color: lightgray;
      border-radius: 10%;
      height: 150px;
      aspect-ratio: 1 / 1;
      animation: 5s ease-in-out 0s infinite alternate box-rise;
   }
   @keyframes box-rise {
      from {
      transform: translateY(100vh);
      }
      to {
      transform: translateY(0);
      }
   }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS animation - Animating Multiple Properties

In the following example, multiple properties are smoothly animated by using the animation shorthand property.

<html>
<head>
<style>
   :root {
      overflow: hidden;
      background-color: lightgreen;
      display: flex;
      height: 400px;
      justify-content: center;
   }
   .flower {
      background-color: #ff69b4; 
      border-radius: 15%;
      width: 150px;
      height: 150px;
      animation: 3s ease-in-out 0s infinite alternate blooming-flower;
   }
   @keyframes blooming-flower {
      from {
         transform: translateY(110vh) rotate(60deg);
         background-color: #00bfff; 
         box-shadow: 0 0 10px #00bfff;
      }
      to {
         transform: translateY(0) rotate(0);
         background-color: #ffd700; 
         box-shadow: 0 0 20px #ffd700;
      }
   }
</style>
</head>
<body>
<div class="flower"></div>
</body>
</html>

CSS animation - Applying Multiple Animations

In the following example, the animation shorthand property is used to apply a dual animation sequence.

<html>
<head>
<style>
   :root {
      overflow: hidden;
      background-color: #ffeb3b; 
      display: flex;
      height: 400px;
      justify-content: center;
   }
   .firework {
      background-color: #ff4500; 
      border-radius: 50%;
      width: 200px;
      height: 120px;
      animation: 3s linear 0s infinite alternate explode-firework, 4s linear 0s infinite alternate color-shift;
   }
   @keyframes explode-firework {
      from {
         transform: translateY(110vh) rotate(180deg);
         background-color: #ff0000; 
         box-shadow: 0 0 10px #ff0000;
      }
      to {
         transform: translateY(0) rotate(0);
         background-color: #0000ff; 
         box-shadow: 0 0 20px #0000ff;
      }
   }
   @keyframes color-shift {
      from {
         filter: hue-rotate(0deg);
      }
      to {
         filter: hue-rotate(360deg);
      }
   }
</style>
</head>
<body>
<div class="firework"></div>
</body>
</html>

CSS animation - Cascading Multiple Animations

In the following example, two different animations are cascaded together in a smooth manner using the animation shorthand property.

<html>
<head>
<style>
   :root {
      overflow: hidden;
      background-color: #ff7f50; 
      justify-content: center;
      align-items: center;
      height: 200px;
   }
   .shape {
      background-color: #9acd32; 
      width: 120px;
      height: 120px;
      border-radius: 30%;
      animation: 2s ease-in-out 0s infinite alternate ascent, 2s linear 0s infinite alternate swing;
   }
   @keyframes ascent {
      from {
         transform: translateY(110vh);
      }
      to {
         transform: translateY(0);
      }
   }
   @keyframes swing {
      from {
         transform: translateX(90vw);
      }
      to {
         transform: translateX(10vw);
      }
   }
</style>
</head>
<body>
<div class="shape"></div>
</body>
</html>
Advertisements