// CSS Syntax
// animation: name duration timing-function delay iteration-count direction fill-mode play-state;

.ui-animate {
  backface-visibility: hidden;

  animation-duration: 400ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;

  &__rotate {
    transform-origin: center center;

    animation-name: rotate;
    animation-timing-function: linear;
  }

  &__spring {
    animation-name: spring;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }

  &__fade-in {
    animation-name: fade-in;
  }

  &__fade-out {
    animation-name: fade-out;
  }

  &__fade-in-scale {
    animation-name: fade-in-scale;
  }

  &__fade-in-out {
    animation-name: fade-in-out;
  }
  &__slide-down {
    animation-name: slide-down;
  }
  &__slide-up {
    animation-name: slide-up;
  }

  &--speed {
    &-3s {
      animation-duration: 3s;
    }
    &-slowest {
      animation-duration: 800ms;
    }
    &-slow {
      animation-duration: 600ms;
    }
    &-fast {
      animation-duration: 200ms;
    }
  }

  &--paused {
    animation-play-state: paused;
  }

  &--delay-0 {
    animation-delay: 0s;
  }
  &--delay-1 {
    animation-delay: 0.2s;
  }
  &--delay-2 {
    animation-delay: 0.4s;
  }
  &--delay-3 {
    animation-delay: 0.6s;
  }
  &--delay-4 {
    animation-delay: 0.8s;
  }
  &--delay-5 {
    animation-delay: 1s;
  }
  &--delay-6 {
    animation-delay: 1.2s;
  }
  &--delay-7 {
    animation-delay: 1.4s;
  }
  &--delay-8 {
    animation-delay: 1.6s;
  }
  &--delay-9 {
    animation-delay: 1.8s;
  }
  &--delay-10 {
    animation-delay: 2s;
  }

  &--infinite {
    animation-iteration-count: infinite;
  }

  &__color-change {
    animation-name: color-change-br;
    animation-duration: 1s;
  }
}