CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
  0%   { transform: scale(0.3);  opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9);  }
  100% { transform: scale(1);    opacity: 1; }
}

/* Button click */
.btn:active { transform: scale(0.96); }

/* Kart hover */
.card { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.card:hover { transform: scale(1.02); }