Always combine transitions with:

transform: scale();
transform: translate();
transform: rotate();

👉 Example:

.box {
  transition: transform 0.4s ease;
}

.box:hover {
  transform: translateY(-10px);
}

Advanced Concepts

1. Hardware Acceleration

transform: translateZ(0);

👉 Makes animation smoother (GPU usage)

2. will-change (Optimization)

will-change: transform;

👉 Browser prepares for animation

⚠️ Use only when needed

Transition vs Animation

• Transition → simple interaction
• Animation → complex sequences