git.roojs.org Git - roojs1/blob - scss/startbootstrap-sb-admin-2/utilities/_animation.scss

   1 // Animation Utilities
   2
   3 // Grow In Animation
   4
   5 @keyframes growIn {
   6   0% {
   7     transform: scale(0.9);
   8     opacity: 0;
   9   }
  10   100% {
  11     transform: scale(1);
  12     opacity: 1;
  13   }
  14 }
  15
  16 .animated--grow-in {
  17   animation-name: growIn;
  18   animation-duration: 200ms;
  19   animation-timing-function: transform cubic-bezier(.18,1.25,.4,1), opacity cubic-bezier(0,1,.4,1);
  20 }
  21
  22 // Fade In Animation
  23
  24 @keyframes fadeIn {
  25   0% {
  26     opacity: 0;
  27   }
  28   100% {
  29     opacity: 1;
  30   }
  31 }
  32
  33 .animated--fade-in {
  34   animation-name: fadeIn;
  35   animation-duration: 200ms;
  36   animation-timing-function: opacity cubic-bezier(0,1,.4,1);
  37 }