CSS Transition Timing Functions

Apply CSS transitions with custom cubic-bezier timing functions for natural motion and interactive feedback.

CssData Fetching

Code

.btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.smooth {
  transition: opacity 0.3s ease, transform 0.3s ease;
}