css-animations.md

⚑ CSS Animations

It is used to create sequential order of change in the style of an element as an CSS animation.

☴ Overview:

1. Keyframes
2. Animation properties
3. Animation timing functions
4. Animation delay
5. Animation iteration count
6. Animation direction

✦ Keyframes:

It define the specific points in an animation sequence.

Syntax: @keyframes animation-name { ... }

Example:

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

✦ Animation Properties:

This defines set of properties for handling and control how an animation is played.

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

Example:

div {
  animation: fade-in 2s ease-in-out 1s infinite alternate;
}

✦ Animation Timing Functions:

It defines the speed curve of the animation.

Syntax: animation-timing-function: value;

Example:

animation-timing-function: ease-in-out;

✦ Animation Duration:

It sets the length of the animation.

Syntax: animation-duration: value;

Example:

animation-duration: 3s;

✦ Animation Delay:

It sets the delay before the animation starts.

Syntax: animation-delay: value;

Example:

animation-delay: 1s;

✦ Animation Iteration Count:

It sets the number of times the animation should play.

Syntax: animation-iteration-count: value;

Example:

animation-iteration-count: 3;

✦ Animation Direction:

It sets the direction of the animation playing state.

Syntax: animation-direction: value;

Example:

animation-direction: alternate;

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page