// This file contains reusable animations for github.

/* Fade in an element */ .anim-fade-in {

animation-name: fade-in;
animation-duration: 1s;
animation-timing-function: ease-in-out;

&.fast {
  animation-duration: 300ms;
}

}

@keyframes fade-in {

0% {
  opacity: 0;
}

100% {
  opacity: 1;
}

}

/* Fade out an element */ .anim-fade-out {

animation-name: fade-out;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;

&.fast {
  animation-duration: 0.3s;
}

}

@keyframes fade-out {

0% {
  opacity: 1;
}

100% {
  opacity: 0;
}

}

/* Fade in and slide up an element */ .anim-fade-up {

opacity: 0;
animation-name: fade-up;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-delay: 1s;

}

@keyframes fade-up {

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

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

}

/* Fade an element out and slide down */ .anim-fade-down {

animation-name: fade-down;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;

}

@keyframes fade-down {

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

100% {
  opacity: 0.5;
  transform: translateY(100%);
}

}

/* Grow an element width from 0 to 100% */ .anim-grow-x {

width: 0%;
animation-name: grow-x;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
animation-delay: 0.5s;

}

@keyframes grow-x {

to { width: 100%; }

}

/* Shrink an element from 100% to 0% */ .anim-shrink-x {

animation-name: shrink-x;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;

}

@keyframes shrink-x {

to { width: 0%; }

}

/* Fade in an element and scale it fast */ .anim-scale-in {

animation-name: scale-in;
animation-duration: 0.15s;
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);

}

@keyframes scale-in {

0% {
  opacity: 0;
  transform: scale(0.5);
}

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

}

/* Pulse an element's opacity */ .anim-pulse {

animation-name: pulse;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}

@keyframes pulse {

0% {
  opacity: 0.3;
}

10% {
  opacity: 1;
}

100% {
  opacity: 0.3;
}

}

/* Pulse in an element */ .anim-pulse-in {

animation-name: pulse-in;
animation-duration: 0.5s;

}

@keyframes pulse-in {

0% {
  transform: scale3d(1, 1, 1);
}

50% {
  transform: scale3d(1.1, 1.1, 1.1);
}

100% {
  transform: scale3d(1, 1, 1);
}

}

/* Increase scale of an element on hover */ .hover-grow, .anim-hover-grow {

transition: transform 0.3s;
backface-visibility: hidden;

&:hover {
  transform: scale(1.025);
}

}

/* Rotate an element 360 degrees over and over, used for spinners */ .anim-rotate {

animation: rotate-keyframes 1s linear infinite;

}

@keyframes rotate-keyframes {

100% {
  transform: rotate(360deg);
}

}