amazeui/less/animation.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                     Animation
//
// Description:              Useful CSS3 animations
//
// Component:                `.am-animation-*`
//
// Modifiers:                `.am-animation-fade`
//                           `.am-animation-scale-up`
//                           `.am-animation-scale-down`
//                           `.am-animation-slide-top`
//                           `.am-animation-slide-bottom`
//                           `.am-animation-slide-left`
//                           `.am-animation-slide-right`
//                           `.am-animation-slide-shake`
//                           `.am-animation-reverse`
//                           `.am-animation-delay-*`
//
// Used by:                   Dropdown
//
// =============================================================================

/* ==========================================================================
   Component: Aniamtion
 ============================================================================ */

[class*="am-animation-"] {
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/* Hide animated element if scrollSpy is used */
@media screen {
  .cssanimations [data-am-scrollspy*="animation"] {
    opacity: 0;
  }
}

/* Fade */
.@{ns}animation-fade {
  animation-name: am-fade;
  animation-duration: 0.8s;
  animation-timing-function: linear;
}

/* Scale */

.@{ns}animation-scale-up {
  animation-name: am-scale-up;
}

.@{ns}animation-scale-down {
  animation-name: am-scale-down;
}

/* Slide */
.@{ns}animation-slide-top {
  animation-name: am-slide-top;
}

.@{ns}animation-slide-bottom {
  animation-name: am-slide-bottom;
}

.@{ns}animation-slide-left {
  animation-name: am-slide-left;
}

.@{ns}animation-slide-right {
  animation-name: am-slide-right;
}

.@{ns}animation-slide-top-fixed {
  animation-name: am-slide-top-fixed;
}

/* Shake */
.@{ns}animation-shake {
  animation-name: am-shake;
}

/* Spin */
.@{ns}animation-spin {
  animation: am-spin 2s infinite linear;
}

/* Spring */
.@{ns}animation-left-spring {
  animation: am-left-spring .3s ease-in-out;
}

.@{ns}animation-right-spring {
  animation: am-right-spring .3s ease-in-out;
}

// Modifiers
// =============================================================================
.@{ns}animation-reverse {
  animation-direction: reverse;
}

.@{ns}animation-paused {
  animation-play-state: paused !important;
}

.variant-animation-delay(@delay: 5) {
  .@{ns}animation-delay-@{delay} {
    animation-delay: ~"@{delay}s";
  }
}

.variant-animation-delay(1);
.variant-animation-delay(2);
.variant-animation-delay(3);
.variant-animation-delay(4);
.variant-animation-delay(5);
.variant-animation-delay(6);


/* Keyframes
 ============================================================================ */

/* Fade */
@keyframes am-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Scale up */
@keyframes am-scale-up {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

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

/* Scale down */
@keyframes am-scale-down {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }

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

/* Slide top */
@keyframes am-slide-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide bottom */
@keyframes am-slide-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide left */
@keyframes am-slide-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide right */
@keyframes am-slide-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Shake */
@keyframes am-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-9px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}

/* Slide top fixed */
@keyframes am-slide-top-fixed {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide bottom fixed */
@keyframes am-slide-bottom-fixed {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spin */
@keyframes am-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

/* Spring */
@keyframes am-right-spring {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes am-left-spring {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(0);
  }
}