Motion Magic Potions

Glide, Bounce, Mirror, Escape

Here’s where transforms and transitions finally shake hands.

Transforms give us poses.
Transitions give us flow.

Each recipe below can be part of the show.

---

1) Glide

A soft entry from the side. Great for cards, modals, and reveals.

.card {
  opacity: 0;
  transform: translateX(-40%) scale(0.95);
  transition: transform 650ms ease-out, opacity 650ms ease-out;
}
.card:hover {
  opacity: 1;
  transform: translateX(0) scale(1);
}

2) Bounce

A playful hover hop. Perfect for buttons and icons.

.icon {
  transition: transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1.4);
}
.icon:hover {
  transform: translateY(-26px) scale(1.07);
}

3) Mirror

A clean Y-axis flip. Use for toggles, switches, and card backs.

.tile {
  transition: transform 700ms ease-in-out;
  backface-visibility: hidden;
}
.tile:hover {
  transform: rotateY(180deg);
}

4) Escape

Controlled chaos. A fast launch out of frame.

.thing {
  transition: transform 800ms ease-in, opacity 800ms ease-in;
}
.thing:hover {
  transform: translate(70%, -45%) rotate(14deg) scale(1.18);
  opacity: 1;
}

---

➡️ Next page: Sequencing Lite — shaping motion with delays, staggering, and controlled cascades (without keyframes).