/* rotate clockwise */
@keyframes rotateClockwise {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -360deg);
  }

  to {
    transform-origin: center;
    transform: none;
  }
}

.animate-rotate-clockwise {
  animation-name: rotateClockwise;
  animation-timing-function: linear;
  animation-duration: 2000ms;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* rotate counter clockwise */
@keyframes rotateCounterClockwise {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, +360deg);
  }

  to {
    transform-origin: center;
    transform: none;
  }
}

.animate-rotate-counter-clockwise {
  animation-name: rotateCounterClockwise;
  animation-timing-function: linear;
  animation-duration: 2000ms;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* go up */
@keyframes goUp {
  from, 20%, 80%, to {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(0, -4px, 0);
  }
}

.animate-go-up {
  animation-name: goUp;
  transform-origin: center bottom;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* go down */
@keyframes goDown {
  from, 20%, 80%, to {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(0, 4px, 0);
  }
}

.animate-go-down {
  animation-name: goDown;
  transform-origin: center bottom;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* expand */
@keyframes expand {
  from, 20%, 80%, to {
    transform: scale3d(1, 1, 1);
  }

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

.animate-expand {
  animation-name: expand;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* shrink */
@keyframes shrink {
  from, 20%, 80%, to {
    transform: scale3d(1, 1, 1);
  }

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

.animate-shrink {
  animation-name: shrink;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* download */
@keyframes download {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
}

.animate-download {
  animation-name: download;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/*shake*/
@keyframes shake{
  from, to {   
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {   
    transform: translate3d(-5px, 0, 0);
  }

  20%, 40%, 60%, 80% {   
    transform: translate3d(5px, 0, 0);
  }
}

.animate-shake{
  animation-name: shake;
  animation-duration: 3s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; 
}

/*pulse*/
@keyframes pulse{
  from, to {   
    transform: scale3d(1, 1, 1);
  }

  50% {    
    transform: scale3d(1.25, 1.25, 1.25);
  }  
}
.animate-pulse{
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; 
}

@keyframes fadeInLeft{
  from { 
    transform: none;
  }

  50%{
    transform: translateX(-5px);
  }

  to{
    transform: none;
  }
}

.animate-fadeInLeft{
  animation-name: fadeInLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; 
}

@keyframes flip{
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 5px) rotate3d(0, 1, 0, -190deg);    
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 5px) rotate3d(0, 1, 0, -170deg);  
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95); 
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

.animate-flip{
  animation-name: flip;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; 
}

@keyframes bounce{
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -10px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -5px, 0);
  }

  90% {
    transform: translate3d(0,-1px,0);
  }
}

.animate-bounce{
  animation-name: bounce;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; 
}

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -40%, 0);
  }
}

.animate-slideOutUp { 
  animation-name: slideOutUp;  
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; 
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-75%, 0, 0);
  }
 
  to {    
    transform: translate3d(0, 0, 0);
  }
}

.animate-slideInLeft {
  animation-name: slideInLeft;
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; 
}