🎞️ CSS Animations — Full Tutorial

Last Updated: November 2025

---

CSS Animations allow HTML elements to move, fade, grow, shrink, rotate, or change colors — without using JavaScript 🎨.
They make your webpage more interactive and lively.

🗣 Hinglish Tip: Animation ka matlab — ek property ka value time ke saath badalna. Jaise ek box left se right move kar raha ho.

Syntax

selector {
  animation-name: name;
  animation-duration: time;
  animation-timing-function: ease;
  animation-delay: time;
  animation-iteration-count: number | infinite;
  animation-direction: normal | reverse | alternate;
  animation-fill-mode: none | forwards | backwards | both;
  animation-play-state: running | paused;
}

Shorthand Property

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

Keyframes Define Animation

@keyframes name {
  from {
    property: value;
  }
  to {
    property: value;
  }
}

---

🧩 Animation Properties Explained

Property	Description	Example
animation-name	Name of the keyframes to use	animation-name: fadeIn;
animation-duration	How long one cycle takes	animation-duration: 3s;
animation-timing-function	Speed curve of animation	animation-timing-function: ease-in;
animation-delay	Wait time before animation starts	animation-delay: 1s;
animation-iteration-count	How many times it repeats	animation-iteration-count: infinite;
animation-direction	Playback direction	animation-direction: alternate;
animation-fill-mode	State of element after animation	animation-fill-mode: forwards;
animation-play-state	Pause or play animation	animation-play-state: paused;

---

🎞️ Timing Functions

Function	Description
linear	Constant speed
ease	Default → slow-fast-slow
ease-in	Starts slow
ease-out	Ends slow
ease-in-out	Slow start & end
cubic-bezier()	Custom speed curve

🗣 Hinglish Tip:Cubic-bezier ek graph hota hai jisme tum speed ka pattern custom set karte ho.

---

Example: Simple Animation

@keyframes moveRight {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background: coral;
  animation-name: moveRight;
  animation-duration: 2s;
}

---

Example: Fade In & Out

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

.fade-box {
  width: 100px;
  height: 100px;
  background: pink;
  animation: fade 4s ease-in-out infinite;
}

---

Example: Rotate Loader

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 80px;
  height: 80px;
  border: 8px solid #ccc;
  border-top: 8px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

---

Example: Bounce Effect

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}

.ball {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
}

---

Example: Multiple Animations

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

@keyframes colorChange {
  0% {
    background: red;
  }
  100% {
    background: yellow;
  }
}

.multi {
  position: relative;
  width: 100px;
  height: 100px;
  animation: move 2s linear infinite, colorChange 2s alternate infinite;
}

---

Control Animation with Hover

.box {
  animation: move 3s linear infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

---