// Transition Property
.transition-none {transition-property: none; }
.transition-all {transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity {transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-shadow {transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform {transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

// transitionDuration
$transitionDurations: 'duration-0' '0s','duration-75' '75ms','duration-100' '100ms','duration-150' '150ms','duration-200' '200ms','duration-300' '300ms','duration-500' '500ms','duration-700' '700ms','duration-1000' '1000ms';
@each $name, $val in $transitionDurations {	.#{$name} {transition-duration: #{$val};}}

// transitionTimingFunction
$transitionTimingFunctions: 'ease-linear' 'linear','ease-in' 'cubic-bezier(0.4, 0, 1, 1)','ease-out' 'cubic-bezier(0, 0, 0.2, 1)','ease-in-out' 'cubic-bezier(0.4, 0, 0.2, 1)';
@each $name, $val in $transitionTimingFunctions {	.#{$name} {transition-timing-function: #{$val};}}	

// transitionDelay
$transitionDelays: 'delay-0' '0s','delay-75' '75ms','delay-100' '100ms','delay-150' '150ms','delay-200' '200ms','delay-300' '300ms','delay-500' '500ms','delay-700' '700ms','delay-1000' '1000ms';
@each $name, $val in $transitionDelays {	.#{$name} {transition-delay: #{$val};}}	

// Animation
.animate-none	{animation: none;}
.animate-spin	{animation: spin 1s linear infinite;}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-ping	{animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-pulse	{animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
.animate-bounce	{animation: bounce 1s infinite;}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}