demo · v136

Animated Morpher

corner-shape is animatable. Hover the cards to morph from one shape to another — round ↔ squircle, round ↔ bevel, squircle ↔ notch. The bottom auto-cycler tracks every transition in a CSS @keyframes.

round → squircle

round → bevel

squircle → notch

auto-cycle keyframes

@keyframes morph {
  0%   { corner-shape: round;    border-radius: 50%; }
  33%  { corner-shape: squircle; border-radius: 30%; }
  66%  { corner-shape: scoop;    border-radius: 30%; }
  100% { corner-shape: round;    border-radius: 50%; }
}

see also