MicronCSS

Effects & Animations

Effects

Transition

Class
Property
transition-1transition: 0.15s ease-in-out;
transition-2transition: 0.2s ease-in-out;
transition-3transition: 0.3s ease-in-out;
transition-4transition: 0.4s ease-in-out;
transition-5transition: 0.5s ease-in-out;

Usage 

<p class="hover:text-blue-100 transition-2">Change to blue</p>

Opacity

Class
Property
o-10opacity: 0.1;
o-20opacity: 0.2;
o-30opacity: 0.3;
o-40opacity: 0.4;
o-50opacity: 0.5;
o-60opacity: 0.6;
o-70opacity: 0.7;
o-80opacity: 0.8;
o-90opacity: 0.9;
o-100opacity: 1.0;

Usage 

<div
  class="bg-center bg-no-repeat bg-cover o-90"
  style="background-image:
url('/src/assets/awesomebgimage.jpg;')"
></div>

Rotate

Class
Property
rotate-45transform: rotate(45deg);
rotate-90transform: rotate(90deg);
rotate--45transform: rotate(-45deg);
rotate--90transform: rotate(-90deg);

Usage 

<div
  class="absolute top-2 right-9 font-3xl 
  rotate--45 cursor-pointer transition-1"
>
  +
</div>
<!-- "rotate--45" will rotate the plus sign -45deg -->

Scale

Class
Property
scale-0transform: scale(0);
scale-50transform: scale(0.5);
scale-75transform: scale(0.75);
scale-90transform: scale(0.9);
scale-100transform: scale(1);
scale-110transform: scale(1.1);
scale-120transform: scale(1.2);
scale-150transform: scale(1.5);
scale-175transform: scale(1.75);
scale-200transform: scale(2);
scale-250transform: scale(2.5);
scale-300transform: scale(3);

Usage 

<button class="hover:scale-150">Reset</button>

Scale X

Class
Property
scale-x-0transform: scale(0);
scale-x-50transform: scale(0.5);
scale-x-75transform: scale(0.75);
scale-x-90transform: scale(0.9);
scale-x-100transform: scale(1);
scale-x-110transform: scale(1.1);
scale-x-120transform: scale(1.2);
scale-x-150transform: scale(1.5);
scale-x-175transform: scale(1.75);
scale-x-200transform: scale(2);
scale-x-250transform: scale(2.5);
scale-x-300transform: scale(3);

Scale Y

Class
Property
scale-y-0transform: scale(0);
scale-y-50transform: scale(0.5);
scale-y-75transform: scale(0.75);
scale-y-90transform: scale(0.9);
scale-y-100transform: scale(1);
scale-y-110transform: scale(1.1);
scale-y-120transform: scale(1.2);
scale-y-150transform: scale(1.5);
scale-y-175transform: scale(1.75);
scale-y-200transform: scale(2);
scale-y-250transform: scale(2.5);
scale-y-300transform: scale(3);

Animations

Animations are subjective, and that is why there are only two. The two included are considered to be "general purpose". Use as you wish.

Fade

Class
Property
fade-1animation: fadein 0.15s ease-in;
fade-2animation: fadein 0.2s ease-in;
fade-3animation: fadein 0.3s ease-in;
fade-4animation: fadein 0.4s ease-in;
fade-5animation: fadein 0.5s ease-in;
@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Bounce Fade

Class
Property
bounce-fade-1animation: bouncefadein 0.15s ease-in;
bounce-fade-2animation: bouncefadein 0.2s ease-in;
bounce-fade-3animation: bouncefadein 0.3s ease-in;
bounce-fade-4animation: bouncefadein 0.4s ease-in;
bounce-fade-5animation: bouncefadein 0.5s ease-in;
bounce-fade-1animation: bouncefadein 0.15s ease-in;
bounce-fade-2animation: bouncefadein 0.2s ease-in;
bounce-fade-3animation: bouncefadein 0.3s ease-in;
bounce-fade-4animation: bouncefadein 0.4s ease-in;
bounce-fade-5animation: bouncefadein 0.5s ease-in;
@keyframes bouncefadein {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}