.transition {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  &.visible {
    display: block !important;
    visibility: visible !important;
  }

  &.hidden {
    display: none !important;
    visibility: hidden !important;
  }

  &.fade-in {
    animation-name: fade-enter;
  }

  &.fade-out {
    animation-name: fade-leave;
  }

  &.zoom-in {
    animation-name: zoom-enter;
  }

  &.zoom-out {
    animation-name: zoom-leave;
  }

  &.door-in {
    animation-name: door-enter;
  }

  &.door-out {
    animation-name: door-leave;
  }

  &.flip-in {
    animation-name: flip-enter;
  }

  &.flip-out {
    animation-name: flip-leave;
  }

  &.moveUp-in {
    animation-name: moveUp-enter;
  }

  &.moveUp-out {
    animation-name: moveUp-leave;
  }

  &.moveDown-in {
    animation-name: moveDown-enter;
  }

  &.moveDown-out {
    animation-name: moveDown-leave;
  }

  &.moveLeft-in {
    animation-name: moveLeft-enter;
  }

  &.moveLeft-out {
    animation-name: moveLeft-leave;
  }

  &.moveRight-in {
    animation-name: moveRight-enter;
  }

  &.moveRight-out {
    animation-name: moveRight-leave;
  }

  &.rotate-in {
    animation-name: rotate-enter;
  }

  &.rotate-out {
    animation-name: rotate-leave;
  }

  &.scaleDown-in {
    animation-name: scaleDown-enter;
  }

  &.scaleDown-out {
    animation-name: scaleDown-leave;
  }

  &.scaleUp-in {
    animation-name: scaleUp-enter;
  }

  &.scaleUp-out {
    animation-name: scaleUp-leave;
  }

  &.slideUp-in {
    animation-name: slideUp-enter;
  }

  &.slideUp-out {
    animation-name: slideUp-leave;
  }

  &.slideDown-in {
    animation-name: slideDown-enter;
  }

  &.slideDown-out {
    animation-name: slideDown-leave;
  }

  &.slideLeft-in {
    animation-name: slideLeft-enter;
  }

  &.slideLeft-out {
    animation-name: slideLeft-leave;
  }

  &.slideRight-in {
    animation-name: slideRight-enter;
  }

  &.slideRight-out {
    animation-name: slideRight-leave;
  }

  &.bounces-in {
    animation-name: bounce-enter;
  }

  &.bounces-out {
    animation-name: bounce-leave;
  }

  /* static animation */
  &.flash {
    animation-name: flash;
  }

  &.shake {
    animation-name: shake;
  }

  &.tada {
    animation-name: tada;
  }

  &.pulse {
    animation-name: pulse;
  }

  &.swing {
    animation-name: swing;
  }
}