Animation

Classes related to simple translation movements and opacity transitions.

• .scale-outin-once-1{animation: scaleoutin 0.5s}
  .appear-once-1{animation: fadeinout 1s}
  .appear-once-2{animation: fadeinout 2s}
  .appear-once-3{animation: fadeinout 3s}
  .appear-once-4{animation: fadeinout 4s}
  .appear-delay-1{animation: appeardelay 0.5s}
  .appear-delay-2{animation: appeardelay 2s}
  .appear-hiding{opacity: 0}
  .appear-hiding-1{opacity: 0; transition: all 0.1s ease-in-out}
  .appear-hiding-2{opacity: 0; transition: all 0.2s ease-in-out}
  .appear-appear{opacity: 1}
  .spin-1{animation: spin 1s;  animation-iteration-count: infinite }
  .spin-2{animation: spin 2s;  animation-iteration-count: infinite }
  .spin-3{animation: spin 3s;  animation-iteration-count: infinite }
  .spin-4{animation: spin 4s;  animation-iteration-count: infinite }
  .spin-5{animation: spin 5s;  animation-iteration-count: infinite }
  .spin-6{animation: spin 6s;  animation-iteration-count: infinite }
  .spin-7{animation: spin 7s;  animation-iteration-count: infinite }
  .spin-8{animation: spin 8s;  animation-iteration-count: infinite }
  .spin-9{animation: spin 9s;  animation-iteration-count: infinite }
  .spin-10{animation: spin 10s;  animation-iteration-count: infinite }
  .spin-20{animation: spin 20s;  animation-iteration-count: infinite }
  .spin-60{animation: spin 60s;  animation-iteration-count: infinite }
  .spin-120{animation: spin 120s;  animation-iteration-count: infinite }
  .huerotate-1{animation: huerotate 20s;  animation-iteration-count: infinite }
  .hover-1{animation: hover1 1s;  animation-iteration-count: infinite }
  .hover-2{animation: hover 2s;  animation-iteration-count: infinite }
  .hover-3{animation: hover 3s;  animation-iteration-count: infinite }
  .hover-4{animation: hover 4s;  animation-iteration-count: infinite }
  .shake-1{animation: shake 1s;  animation-iteration-count: infinite }
  .shake-2{animation: shake 2s;  animation-iteration-count: infinite }
  .shakefull-1{animation: shakefull 0.1s;  animation-iteration-count: infinite }
  .shakefull-2{animation: shakefull 0.2s;  animation-iteration-count: infinite }
  
  @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(359deg)} }
  @keyframes appeardelay {0%{opacity: 0}100%{opacity: 1}}
  @keyframes fadeinout {0%{opacity: 0}25%{opacity: 1}75%{opacity: 1}100%{opacity: 0}}
  @keyframes scaleoutin {0%{scale: 1}50%{scale: 1.05}100%{scale: 1}}
  @keyframes huerotate {
  	0%{filter: hue-rotate(0)} 50%{filter: hue-rotate(0.8rad)}100%{filter: hue-rotate(0)}
  }
  @keyframes shakefull {
  	0%{transform: rotate(0deg)}50%{transform: rotate(10deg)}100%{transform: rotate(0deg)}
  }
  @keyframes shake {
  	0%{transform: translateX(0px)}50%{transform: translateX(10px)}100%{transform: translateX(0px)}
  }
  @keyframes hover1 {
  	0%{transform: translateY(-5px)}50%{transform: translateY(5px)}100%{transform: translateY(-5px)}
  }
  @keyframes hover {
  	0%{transform: translateY(-10px)}50%{transform: translateY(10px)}100%{transform: translateY(-10px)}
  }