Merakesh

CSS Animation Library

Discover ready-to-use CSS animations to enhance your web projects. Customize duration, delay, and easing functions with live preview.

fadeIn

Fade in from transparent to opaque

slideInUp

Slide in from bottom to current position

slideInLeft

Slide in from left to current position

zoomIn

Zoom in from small to normal size

rotateIn

Rotate in from a -200deg angle

bounceIn

Bounce in from a smaller size

Customize Animation

CSS Code


.fadein {
  animation-name: fadein;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes fadein {
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
}

Add this CSS code to your stylesheet or use inline styles with the equivalent properties.

How to Use CSS Animations

Learn how to implement these animations in your projects with these simple steps