CSS Animation: Keyframes and Animation Shorthand

CSS animations allow you to animate HTML elements without using JavaScript. You can move, rotate, fade, or transform elements smoothly.

There are two main parts:

1. Defining keyframes → tells the browser how the animation should behave over time.
2. Animation shorthand property → applies the animation to the element with all its settings in one line.

1️⃣ Keyframes

Keyframes define the stages of an animation.

Basic syntax:

@keyframes animation-name {
  0% {
    property: value;
  }
  50% {
    property: value;
  }
  100% {
    property: value;
  }
}

• 0% → Start of animation
• 100% → End of animation
• You can also use from (0%) and to (100%)

Example: Moving a Box

@keyframes moveBox {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}

This animation moves a box horizontally from 0px to 200px.

2️⃣ Animation Properties

To apply an animation, CSS has several properties:

PropertyDescriptionanimation-nameName of the keyframe animationanimation-durationHow long the animation takes (e.g., 2s)animation-timing-functionSpeed curve (e.g., linear, ease, ease-in, ease-out)animation-delayDelay before animation startsanimation-iteration-countHow many times to repeat (e.g., 1, infinite)animation-directionNormal, reverse, alternateanimation-fill-modeWhat happens before/after animation (forwards, backwards)

3️⃣ Animation Shorthand Property

Instead of writing multiple lines, you can use the shorthand animation property:

.element {
  animation: moveBox 2s linear 1s infinite alternate forwards;
}

Order of shorthand values:

animation: name duration timing-function delay iteration-count direction fill-mode;

• Only name and duration are required.
• Others are optional.

Example: Simple Animation

HTML

<div class="box">Animate Me</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  position: relative;
  animation-name: moveBox;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes moveBox {
  0% {
    left: 0px;
    background-color: lightblue;
  }
  50% {
    left: 200px;
    background-color: lightgreen;
  }
  100% {
    left: 0px;
    background-color: lightblue;
  }
}

This makes the box move left-to-right and back, changing color as it moves.

4️⃣ Using Shorthand for the Same Animation

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  position: relative;
  animation: moveBox 3s ease-in-out 0s infinite alternate;
}

This does exactly the same as above, but in one line.

5️⃣ Multiple Animations on One Element

You can apply more than one animation using a comma-separated list:

.box {
  animation: moveBox 3s ease-in-out infinite alternate,
             rotateBox 2s linear infinite;
}

@keyframes rotateBox {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This moves the box and rotates it at the same time.

Compilation of Entire Code