Open navigation menu

CSS Keyframe Animations

Create smooth keyframe animations with transform and opacity for performentering transitions without layout thrashing.

CssData Fetching

Code

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

Related Examples