What are the css key frames? Explain in detail.

CSS keyframes are a foundational feature of the CSS Animation Module, used to define how an animated element changes its styles over time. They allow you to specify intermediate steps between the start and end of an animation, making it possible to create complex animations without relying on JavaScript or external libraries.

---

Keyframes Overview

• A @keyframes rule defines the intermediate steps of an animation.
• You describe the animation by defining specific styles at different points (percentages) during the animation timeline.

---

Syntax

@keyframes animation-name {
/* At 0% of the animation */
0% {
property: value;
}
/* At 50% of the animation */
50% {
property: value;
}
/* At 100% of the animation */
100% {
property: value;
}
}

---

Steps to Use Keyframes

1. Define the Keyframes:
   Use the @keyframes rule to specify the name and the intermediate styles of the animation.

2. Apply the Animation:
   Use the animation property on an element to bind the keyframes, set the duration, timing, and other properties.

---

Key Animation Properties

Property	Description
animation-name	Specifies the name of the keyframes to apply.
animation-duration	Defines how long the animation runs (e.g., 2s, 500ms).
animation-timing-function	Sets the easing of the animation (ease, linear, ease-in-out).
animation-delay	Adds a delay before the animation starts.
animation-iteration-count	Specifies how many times the animation repeats (e.g., infinite, 1, 2).
animation-direction	Sets whether the animation alternates direction (normal, reverse, alternate).

---

Example

Simple Animation (Changing Color):

/* Define keyframes */
@keyframes changeColor {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: blue;
}
}
/* Apply animation to an element */
div {
width: 100px;
height: 100px;
animation: changeColor 3s infinite;
}

---

Keyframes with Multiple Properties

Keyframes can animate multiple CSS properties at the same time.

@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
50% {
transform: translateX(100px) rotate(180deg);
opacity: 0.5;
}
100% {
transform: translateX(0) rotate(360deg);
opacity: 1;
}
}
div {
width: 50px;
height: 50px;
background-color: green;
animation: moveAndRotate 4s ease-in-out infinite;
}

---

Keyframes with Shortcuts

You can use from and to as shorthand for 0% and 100%.

@keyframes fadeInOut {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div {
animation: fadeInOut 2s infinite alternate;
}

---

Browser Support

• Fully Supported: Modern browsers (Chrome, Firefox, Edge, Safari).
• Prefixes (Legacy): Older browsers may require prefixes like -webkit-.

---

Use Cases

1. Loading Spinners:
   Rotating, pulsing, or bouncing effects.
2. Hover Animations:
   Smooth transitions when hovering over buttons or links.
3. Slideshows:
   Changing slides automatically with transitions.
4. Interactive Elements:
   Animating modals, tooltips, or dropdowns.

Keyframes allow you to create visually engaging animations efficiently with full control over the timing and intermediate states.

Published by GovtJobOnline Editorial Team
Updated Daily – Latest Govt Jobs & Education News