qunit-dark/less/anims.less

A kind of dark theme for qunit

@anim-fade-translate-short : 20px;

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-@anim-fade-translate-short);
  }

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

.fadeInLeft {
  animation: fadeInLeft .5s ease-out;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-@anim-fade-translate-short);
  }

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

.fadeInDown {
  animation: .5s ease-out fadeInDown;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(@anim-fade-translate-short);
  }

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

.fadeInRight {
  animation: .5s ease-out fadeInRight;
}


@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  backface-visibility: visible !important;
  animation: flipInX .5s ease-out;
}