CSS Transitions and Animations

ADVERTISEMENT

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

PropertyDescription
animation-nameName of the keyframes
animation-durationTotal time of animation
animation-delayDelay before it starts
animation-timing-functionSpeed curve (ease, linear, etc.)
animation-iteration-countHow many times it repeats (infinite)
animation-directionnormal, reverse, alternate
animation-fill-modeControls final state (forwards, etc.)

✅ Example:

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

🔸 Transitions vs Animations

FeatureTransitionsAnimations
TriggerUser interaction (e.g., hover)Auto or manual start (no trigger needed)
ControlLimited (start/end only)Full timeline control via keyframes
SyntaxShort, simpleMore 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

ADVERTISEMENT