micro-interactions-css/dist/micro-interactions.css

Easy and Handy CSS npm that delivers micro interactions with just adding classes.

Micro Interactions CSS

/* Micro Interactions CSS Library */

/* General transition */
.micro-interaction {
  transition: all 150ms ease-in-out;
}

/* Move Right */
.move-right:hover {
  animation: moveRight 150ms ease-in-out forwards;
}

@keyframes moveRight {
  to {
    transform: translateX(5%);
  }
}

/* Move Left */
.move-left:hover {
  animation: moveLeft 150ms ease-in-out forwards;
}

@keyframes moveLeft {
  to {
    transform: translateX(-5%);
  }
}

/* Move Top */
.move-top:hover {
  animation: moveTop 150ms ease-in-out forwards;
}

@keyframes moveTop {
  to {
    transform: translateY(-5%);
  }
}

/* Move Bottom */
.move-bottom:hover {
  animation: moveBottom 150ms ease-in-out forwards;
}

@keyframes moveBottom {
  to {
    transform: translateY(5%);
  }
}

/* Scale Up */
.scale:hover {
  transform: scale(1.1);
}

/* Scale Down */
.scale-down:hover {
  transform: scale(0.9);
}

/* Spin (continuous) */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Spin Reverse (continuous) */
.spin-reverse {
  animation: spinReverse 1s linear infinite;
}

@keyframes spinReverse {
  100% {
    transform: rotate(-360deg);
  }
}

/* Shine effect */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
}

.shine:hover::before {
  animation: shineEffect 0.7s ease-in-out forwards;
}

@keyframes shineEffect {
  100% {
    left: 125%;
  }
}