CSS Transitions and Animations

Why Use CSS Animations?

Animations make your website feel alive, improving user experience, engagement, and interactivity without relying on JavaScript.

🔹 CSS Transitions

Transitions allow smooth changes from one style to another.

✅ Syntax:

.element {
  transition: property duration timing-function delay;
}

✅ Example:

.button {
  background-color: #0073aa;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: #005e91;
}

You can specify multiple properties:

.card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

🔹 CSS Transform

Used to move, scale, rotate, or skew elements visually.

✅ Common Transform Functions:

transform: translateX(50px);   /* Move right */
transform: scale(1.1);         /* Zoom in */
transform: rotate(10deg);      /* Rotate */
transform: skewX(10deg);       /* Skew */

Combine multiple:

transform: scale(1.2) rotate(5deg);

🔹 Keyframe Animations

Keyframes let you define complex, multi-step animations.

✅ Syntax:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 0.5s ease forwards;
}

You can use percentages for more control:

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

🔹 Animation Properties

Property	Description
`animation-name`	Name of the keyframes
`animation-duration`	Total time of animation
`animation-delay`	Delay before it starts
`animation-timing-function`	Speed curve (`ease`, `linear`, etc.)
`animation-iteration-count`	How many times it repeats (`infinite`)
`animation-direction`	`normal`, `reverse`, `alternate`
`animation-fill-mode`	Controls final state (`forwards`, etc.)

✅ Example:

.element {
  animation: fadeIn 1s ease-in-out 0.3s forwards;
}

🔸 Transitions vs Animations

Feature	Transitions	Animations
Trigger	User interaction (e.g., hover)	Auto or manual start (no trigger needed)
Control	Limited (start/end only)	Full timeline control via keyframes
Syntax	Short, simple	More complex, more powerful

✨ Practical Tip

You can combine everything!

.card {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

Or animate in on load:

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeUp 0.6s ease-out forwards;
}

✅ Summary Covered

Transitions: smooth style changes
Transform: rotate, scale, skew, translate
Keyframes: custom timeline animations
Animation properties
Transition vs animation comparison