File Manager
/* Animations v1.4, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/
// ================================================================================== */
/* Table of Contents
// ==================================================
// #Global
// #Fade In
// #Fade In Up
// #Fade In Down
// #Fade In Left
// #Fade In Right
// #Fade In Up Large
// #Fade In Down Large
// #Fade In Left Large
// #Fade In Right Large
// #Fade Out
// #Fade Out Up
// #Fade Out Down
// #Fade Out Left
// #Fade Out Right
// #Fade Out Up Large
// #Fade Out Down Large
// #Fade Out Left Large
// #Fade Out Right Large
// #Zoom In
// #Zoom In Up
// #Zoom In Down
// #Zoom In Left
// #Zoom In Right
// #Zoom In Up Large
// #Zoom In Down Large
// #Zoom In Left Large
// #Zoom In Right Large
// #Zoom Out
// #Zoom Out Up
// #Zoom Out Down
// #Zoom Out Left
// #Zoom Out Right
// #Zoom Out Up Large
// #Zoom Out Down Large
// #Zoom Out Left Large
// #Zoom Out Right Large
// #Bounce In
// #Bounce In Up
// #Bounce In Down
// #Bounce In Left
// #Bounce In Right
// #Bounce Out
// #Bounce Out Up
// #Bounce Out Down
// #Bounce Out Left
// #Bounce Out Right
// #Flash
// #Strobe
// #Shake Horizontally
// #Shake Vertically
// #Bounce
// #Tada
// #Wave
// #Spin Clockwise
// #Spin Counter-Clockwise
// #Slingshot Clockwise
// #Slingshot Counter-Clockwise
// #Wobble
// #Pulse
// #Pulsate
// #Heartbeat
// #Panic
/* #Global
// ================================================== */
.animate,
.trigger,
.hover-flash,
.hover-strobe,
.hover-shakeH,
.hover-shakeV,
.hover-bounce,
.hover-tada,
.hover-wave,
.hover-spinCW,
.hover-spinCCW,
.hover-slingshotCW,
.hover-slingshotCCW,
.hover-wobble,
.hover-pulse,
.hover-pulsate,
.hover-heartbeat,
.hover-panic {
opacity: 0;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animate.slow-mo,
.trigger.slow-mo,
.hover-flash.slow-mo,
.hover-strobe.slow-mo,
.hover-shakeH.slow-mo,
.hover-shakeV.slow-mo,
.hover-bounce.slow-mo,
.hover-tada.slow-mo,
.hover-wave.slow-mo,
.hover-spinCW.slow-mo,
.hover-spinCCW.slow-mo,
.hover-slingshotCW.slow-mo,
.hover-slingshotCCW.slow-mo,
.hover-wobble.slow-mo,
.hover-pulse.slow-mo,
.hover-pulsate.slow-mo,
.hover-heartbeat.slow-mo,
.hover-panic.slow-mo {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
.animate.super-slow-mo,
.trigger.super-slow-mo,
.hover-flash.super-slow-mo,
.hover-strobe.super-slow-mo,
.hover-shakeH.super-slow-mo,
.hover-shakeV.super-slow-mo,
.hover-bounce.super-slow-mo,
.hover-tada.super-slow-mo,
.hover-wave.super-slow-mo,
.hover-spinCW.super-slow-mo,
.hover-spinCCW.super-slow-mo,
.hover-slingshotCW.super-slow-mo,
.hover-slingshotCCW.super-slow-mo,
.hover-wobble.super-slow-mo,
.hover-pulse.super-slow-mo,
.hover-pulsate.super-slow-mo,
.hover-heartbeat.super-slow-mo,
.hover-panic.super-slow-mo {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
.animate.ultra-slow-mo,
.trigger.ultra-slow-mo,
.hover-flash.ultra-slow-mo,
.hover-strobe.ultra-slow-mo,
.hover-shakeH.ultra-slow-mo,
.hover-shakeV.ultra-slow-mo,
.hover-bounce.ultra-slow-mo,
.hover-tada.ultra-slow-mo,
.hover-wave.ultra-slow-mo,
.hover-spinCW.ultra-slow-mo,
.hover-spinCCW.ultra-slow-mo,
.hover-slingshotCW.ultra-slow-mo,
.hover-slingshotCCW.ultra-slow-mo,
.hover-wobble.ultra-slow-mo,
.hover-pulse.ultra-slow-mo,
.hover-pulsate.ultra-slow-mo,
.hover-heartbeat.ultra-slow-mo,
.hover-panic.ultra-slow-mo {
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
-o-animation-duration: 4s;
animation-duration: 4s;
}
.animate.hyper-slow-mo,
.trigger.hyper-slow-mo,
.hover-flash.hyper-slow-mo,
.hover-strobe.hyper-slow-mo,
.hover-shakeH.hyper-slow-mo,
.hover-shakeV.hyper-slow-mo,
.hover-bounce.hyper-slow-mo,
.hover-tada.hyper-slow-mo,
.hover-wave.hyper-slow-mo,
.hover-spinCW.hyper-slow-mo,
.hover-spinCCW.hyper-slow-mo,
.hover-slingshotCW.hyper-slow-mo,
.hover-slingshotCCW.hyper-slow-mo,
.hover-wobble.hyper-slow-mo,
.hover-pulse.hyper-slow-mo,
.hover-pulsate.hyper-slow-mo,
.hover-heartbeat.hyper-slow-mo,
.hover-panic.hyper-slow-mo {
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
}
/* .no-js .animate,
.ie .animate,
.trigger,
.hover-flash,
.hover-strobe,
.hover-shakeH,
.hover-shakeV,
.hover-bounce,
.hover-tada,
.hover-wave,
.hover-spinCW,
.hover-spinCCW,
.hover-slingshotCW,
.hover-slingshotCCW,
.hover-wobble,
.hover-pulse,
.hover-pulsate,
.hover-heartbeat,
.hover-panic { opacity: 1; } */
.animate.infinite,
.trigger.infinite,
.hover-flash.infinite,
.hover-strobe.infinite,
.hover-shakeH.infinite,
.hover-shakeV.infinite,
.hover-bounce.infinite,
.hover-tada.infinite,
.hover-wave.infinite,
.hover-spinCW.infinite,
.hover-spinCCW.infinite,
.hover-slingshotCW.infinite,
.hover-slingshotCCW.infinite,
.hover-wobble.infinite,
.hover-pulse.infinite,
.hover-pulsate.infinite,
.hover-heartbeat.infinite,
.hover-panic.infinite {
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* #Fade In
// ================================================== */
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-ms-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
/* #Fade In Up
// ================================================== */
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInUp {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(200px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/* #Fade In Down
// ================================================== */
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-200px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-200px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInDown {
0% {
opacity: 0;
-ms-transform: translateY(-200px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-200px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-200px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-ms-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
/* #Fade In Left
// ================================================== */
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-200px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-200px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInLeft {
0% {
opacity: 0;
-ms-transform: translateX(-200px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-200px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-200px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animate.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-ms-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
/* #Fade In Right
// ================================================== */
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInRight {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(200px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animate.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-ms-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
/* #Fade In Up Large
// ================================================== */
@-webkit-keyframes fadeInUpLarge {
0% {
opacity: 0;
-webkit-transform: translateY(1000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUpLarge {
0% {
opacity: 0;
-moz-transform: translateY(1000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInUpLarge {
0% {
opacity: 0;
-ms-transform: translateY(1000px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-o-keyframes fadeInUpLarge {
0% {
opacity: 0;
-o-transform: translateY(1000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUpLarge {
0% {
opacity: 0;
transform: translateY(1000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate.fadeInUpLarge {
-webkit-animation-name: fadeInUpLarge;
-moz-animation-name: fadeInUpLarge;
-ms-animation-name: fadeInUpLarge;
-o-animation-name: fadeInUpLarge;
animation-name: fadeInUpLarge;
}
/* #Fade In Down Large
// ================================================== */
@-webkit-keyframes fadeInDownLarge {
0% {
opacity: 0;
-webkit-transform: translateY(-1000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDownLarge {
0% {
opacity: 0;
-moz-transform: translateY(-1000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInDownLarge {
0% {
opacity: 0;
-ms-transform: translateY(-1000px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-o-keyframes fadeInDownLarge {
0% {
opacity: 0;
-o-transform: translateY(-1000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDownLarge {
0% {
opacity: 0;
transform: translateY(-1000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate.fadeInDownLarge {
-webkit-animation-name: fadeInDownLarge;
-moz-animation-name: fadeInDownLarge;
-ms-animation-name: fadeInDownLarge;
-o-animation-name: fadeInDownLarge;
animation-name: fadeInDownLarge;
}
/* #Fade In Left Large
// ================================================== */
@-webkit-keyframes fadeInLeftLarge {
0% {
opacity: 0;
-webkit-transform: translateX(-1000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeftLarge {
0% {
opacity: 0;
-moz-transform: translateX(-1000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInLeftLarge {
0% {
opacity: 0;
-ms-transform: translateX(-1000px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-o-keyframes fadeInLeftLarge {
0% {
opacity: 0;
-o-transform: translateX(-1000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeftLarge {
0% {
opacity: 0;
transform: translateX(-1000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animate.fadeInLeftLarge {
-webkit-animation-name: fadeInLeftLarge;
-moz-animation-name: fadeInLeftLarge;
-ms-animation-name: fadeInLeftLarge;
-o-animation-name: fadeInLeftLarge;
animation-name: fadeInLeftLarge;
}
/* #Fade In Right Large
// ================================================== */
@-webkit-keyframes fadeInRightLarge {
0% {
opacity: 0;
-webkit-transform: translateX(1000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRightLarge {
0% {
opacity: 0;
-moz-transform: translateX(1000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInRightLarge {
0% {
opacity: 0;
-ms-transform: translateX(1000px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@-o-keyframes fadeInRightLarge {
0% {
opacity: 0;
-o-transform: translateX(1000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRightLarge {
0% {
opacity: 0;
transform: translateX(1000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animate.fadeInRightLarge {
-webkit-animation-name: fadeInRightLarge;
-moz-animation-name: fadeInRightLarge;
-ms-animation-name: fadeInRightLarge;
-o-animation-name: fadeInRightLarge;
animation-name: fadeInRightLarge;
}
/* #Fade Out
// ================================================== */
@-webkit-keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
.animate.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-ms-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
/* #Fade Out Up
// ================================================== */
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-200px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-200px);
}
}
@-ms-keyframes fadeOutUp {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(-200px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-200px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-200px);
}
}
.animate.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-ms-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
/* #Fade Out Down
// ================================================== */
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(200px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(200px);
}
}
@-ms-keyframes fadeOutDown {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(200px);
}
}
@-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(200px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(200px);
}
}
.animate.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-ms-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
/* #Fade Out Left
// ================================================== */
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 0;
-webkit-transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(-200px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 0;
-moz-transform: translateX(0);
}
100% {
opacity: 1;
-moz-transform: translateX(-200px);
}
}
@-ms-keyframes fadeOutLeft {
0% {
opacity: 0;
-ms-transform: translateX(0);
}
100% {
opacity: 1;
-ms-transform: translateX(-200px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 0;
-o-transform: translateX(0);
}
100% {
opacity: 1;
-o-transform: translateX(-200px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 0;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-200px);
}
}
.animate.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-ms-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
/* #Fade Out Right
// ================================================== */
@-webkit-keyframes fadeOutRight {
0% {
opacity: 0;
-webkit-transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(200px);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 0;
-moz-transform: translateX(0);
}
100% {
opacity: 1;
-moz-transform: translateX(200px);
}
}
@-ms-keyframes fadeOutRight {
0% {
opacity: 0;
-ms-transform: translateX(0);
}
100% {
opacity: 1;
-ms-transform: translateX(200px);
}
}
@-o-keyframes fadeOutRight {
0% {
opacity: 0;
-o-transform: translateX(0);
}
100% {
opacity: 1;
-o-transform: translateX(200px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 0;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(200px);
}
}
.animate.fadeOutRight {
-webkit-animation-name: fadeOutRight;
-moz-animation-name: fadeOutRight;
-ms-animation-name: fadeOutRight;
-o-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
/* #Fade Out Up Large
// ================================================== */
@-webkit-keyframes fadeOutUpLarge {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-1000px);
}
}
@-moz-keyframes fadeOutUpLarge {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-1000px);
}
}
@-ms-keyframes fadeOutUpLarge {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(-1000px);
}
}
@-o-keyframes fadeOutUpLarge {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-1000px);
}
}
@keyframes fadeOutUpLarge {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-1000px);
}
}
.animate.fadeOutUpLarge {
-webkit-animation-name: fadeOutUpLarge;
-moz-animation-name: fadeOutUpLarge;
-ms-animation-name: fadeOutUpLarge;
-o-animation-name: fadeOutUpLarge;
animation-name: fadeOutUpLarge;
}
/* #Fade Out Down Large
// ================================================== */
@-webkit-keyframes fadeOutDownLarge {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(1000px);
}
}
@-moz-keyframes fadeOutDownLarge {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(1000px);
}
}
@-ms-keyframes fadeOutDownLarge {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(1000px);
}
}
@-o-keyframes fadeOutDownLarge {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(1000px);
}
}
@keyframes fadeOutDownLarge {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(1000px);
}
}
.animate.fadeOutDownLarge {
-webkit-animation-name: fadeOutDownLarge;
-moz-animation-name: fadeOutDownLarge;
-ms-animation-name: fadeOutDownLarge;
-o-animation-name: fadeOutDownLarge;
animation-name: fadeOutDownLarge;
}
/* #Fade Out Left Large
// ================================================== */
@-webkit-keyframes fadeOutLeftLarge {
0% {
opacity: 0;
-webkit-transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(-1000px);
}
}
@-moz-keyframes fadeOutLeftLarge {
0% {
opacity: 0;
-moz-transform: translateX(0);
}
100% {
opacity: 1;
-moz-transform: translateX(-1000px);
}
}
@-ms-keyframes fadeOutLeftLarge {
0% {
opacity: 0;
-ms-transform: translateX(0);
}
100% {
opacity: 1;
-ms-transform: translateX(-1000px);
}
}
@-o-keyframes fadeOutLeftLarge {
0% {
opacity: 0;
-o-transform: translateX(0);
}
100% {
opacity: 1;
-o-transform: translateX(-1000px);
}
}
@keyframes fadeOutLeftLarge {
0% {
opacity: 0;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-1000px);
}
}
.animate.fadeOutLeftLarge {
-webkit-animation-name: fadeOutLeftLarge;
-moz-animation-name: fadeOutLeftLarge;
-ms-animation-name: fadeOutLeftLarge;
-o-animation-name: fadeOutLeftLarge;
animation-name: fadeOutLeftLarge;
}
/* #Fade Out Right Large
// ================================================== */
@-webkit-keyframes fadeOutRightLarge {
0% {
opacity: 0;
-webkit-transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(1000px);
}
}
@-moz-keyframes fadeOutRightLarge {
0% {
opacity: 0;
-moz-transform: translateX(0);
}
100% {
opacity: 1;
-moz-transform: translateX(1000px);
}
}
@-ms-keyframes fadeOutRightLarge {
0% {
opacity: 0;
-ms-transform: translateX(0);
}
100% {
opacity: 1;
-ms-transform: translateX(1000px);
}
}
@-o-keyframes fadeOutRightLarge {
0% {
opacity: 0;
-o-transform: translateX(0);
}
100% {
opacity: 1;
-o-transform: translateX(1000px);
}
}
@keyframes fadeOutRightLarge {
0% {
opacity: 0;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(1000px);
}
}
.animate.fadeOutRightLarge {
-webkit-animation-name: fadeOutRightLarge;
-moz-animation-name: fadeOutRightLarge;
-ms-animation-name: fadeOutRightLarge;
-o-animation-name: fadeOutRightLarge;
animation-name: fadeOutRightLarge;
}
/* #Zoom In
// ================================================== */
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes zoomIn {
0% {
opacity: 0;
-moz-transform: scale(0);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@-ms-keyframes zoomIn {
0% {
opacity: 0;
-ms-transform: scale(0);
}
100% {
opacity: 1;
-ms-transform: scale(1);
}
}
@-o-keyframes zoomIn {
0% {
opacity: 0;
-o-transform: scale(0);
}
100% {
opacity: 1;
-o-transform: scale(1);
}
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.animate.zoomIn {
-webkit-animation-name: zoomIn;
-moz-animation-name: zoomIn;
-ms-animation-name: zoomIn;
-o-animation-name: zoomIn;
animation-name: zoomIn;
}
/* #Zoom In Up
// ================================================== */
@-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(200px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
}
@-moz-keyframes zoomInUp {
0% {
opacity: 0;
-moz-transform: scale(0) translateY(200px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
}
@-ms-keyframes zoomInUp {
0% {
opacity: 0;
-ms-transform: scale(0) translateY(200px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
}
@-o-keyframes zoomInUp {
0% {
opacity: 0;
-o-transform: scale(0) translateY(200px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
}
@keyframes zoomInUp {
0% {
opacity: 0;
transform: scale(0) translateY(200px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate.zoomInUp {
-webkit-animation-name: zoomInUp;
-moz-animation-name: zoomInUp;
-ms-animation-name: zoomInUp;
-o-animation-name: zoomInUp;
animation-name: zoomInUp;
}
/* #Zoom In Down
// ================================================== */
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(-200px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
}
@-moz-keyframes zoomInDown {
0% {
opacity: 0;
-moz-transform: scale(0) translateY(-200px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
}
@-ms-keyframes zoomInDown {
0% {
opacity: 0;
-ms-transform: scale(0) translateY(-200px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
}
@-o-keyframes zoomInDown {
0% {
opacity: 0;
-o-transform: scale(0) translateY(-200px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
}
@keyframes zoomInDown {
0% {
opacity: 0;
transform: scale(0) translateY(-200px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate.zoomInDown {
-webkit-animation-name: zoomInDown;
-moz-animation-name: zoomInDown;
-ms-animation-name: zoomInDown;
-o-animation-name: zoomInDown;
animation-name: zoomInDown;
}
/* #Zoom In Left
// ================================================== */
@-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(-200px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(0);
}
}
@-moz-keyframes zoomInLeft {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(-200px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(0);
}
}
@-ms-keyframes zoomInLeft {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(-200px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(0);
}
}
@-o-keyframes zoomInLeft {
0% {
opacity: 0;
-o-transform: scale(0) translateX(-200px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(0);
}
}
@keyframes zoomInLeft {
0% {
opacity: 0;
transform: scale(0) translateX(-200px);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
.animate.zoomInLeft {
-webkit-animation-name: zoomInLeft;
-moz-animation-name: zoomInLeft;
-ms-animation-name: zoomInLeft;
-o-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
/* #Zoom In Right
// ================================================== */
@-webkit-keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(200px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(0);
}
}
@-moz-keyframes zoomInRight {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(200px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(0);
}
}
@-ms-keyframes zoomInRight {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(200px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(0);
}
}
@-o-keyframes zoomInRight {
0% {
opacity: 0;
-o-transform: scale(0) translateX(200px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(0);
}
}
@keyframes zoomInRight {
0% {
opacity: 0;
transform: scale(0) translateX(200px);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
.animate.zoomInRight {
-webkit-animation-name: zoomInRight;
-moz-animation-name: zoomInRight;
-ms-animation-name: zoomInRight;
-o-animation-name: zoomInRight;
animation-name: zoomInRight;
}
/* #Zoom In Up Large
// ================================================== */
@-webkit-keyframes zoomInUpLarge {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(1000px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
}
@-moz-keyframes zoomInUpLarge {
0% {
opacity: 0;
-moz-transform: scale(0) translateY(1000px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
}
@-ms-keyframes zoomInUpLarge {
0% {
opacity: 0;
-ms-transform: scale(0) translateY(1000px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
}
@-o-keyframes zoomInUpLarge {
0% {
opacity: 0;
-o-transform: scale(0) translateY(1000px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
}
@keyframes zoomInUpLarge {
0% {
opacity: 0;
transform: scale(0) translateY(1000px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate.zoomInUpLarge {
-webkit-animation-name: zoomInUpLarge;
-moz-animation-name: zoomInUpLarge;
-ms-animation-name: zoomInUpLarge;
-o-animation-name: zoomInUpLarge;
animation-name: zoomInUpLarge;
}
/* #Zoom In Down Large
// ================================================== */
@-webkit-keyframes zoomInDownLarge {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(-1000px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
}
@-moz-keyframes zoomInDownLarge {
0% {
opacity: 0;
-moz-transform: scale(0) translateY(-1000px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
}
@-ms-keyframes zoomInDownLarge {
0% {
opacity: 0;
-ms-transform: scale(0) translateY(-1000px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
}
@-o-keyframes zoomInDownLarge {
0% {
opacity: 0;
-o-transform: scale(0) translateY(-1000px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
}
@keyframes zoomInDownLarge {
0% {
opacity: 0;
transform: scale(0) translateY(-1000px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate.zoomInDownLarge {
-webkit-animation-name: zoomInDownLarge;
-moz-animation-name: zoomInDownLarge;
-ms-animation-name: zoomInDownLarge;
-o-animation-name: zoomInDownLarge;
animation-name: zoomInDownLarge;
}
/* #Zoom In Left Large
// ================================================== */
@-webkit-keyframes zoomInLeftLarge {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(-1000px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(0);
}
}
@-moz-keyframes zoomInLeftLarge {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(-1000px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(0);
}
}
@-ms-keyframes zoomInLeftLarge {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(-1000px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(0);
}
}
@-o-keyframes zoomInLeftLarge {
0% {
opacity: 0;
-o-transform: scale(0) translateX(-1000px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(0);
}
}
@keyframes zoomInLeftLarge {
0% {
opacity: 0;
transform: scale(0) translateX(-1000px);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
.animate.zoomInLeftLarge {
-webkit-animation-name: zoomInLeftLarge;
-moz-animation-name: zoomInLeftLarge;
-ms-animation-name: zoomInLeftLarge;
-o-animation-name: zoomInLeftLarge;
animation-name: zoomInLeftLarge;
}
/* #Zoom In Right Large
// ================================================== */
@-webkit-keyframes zoomInRightLarge {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(1000px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(0);
}
}
@-moz-keyframes zoomInRightLarge {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(1000px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(0);
}
}
@-ms-keyframes zoomInRightLarge {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(1000px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(0);
}
}
@-o-keyframes zoomInRightLarge {
0% {
opacity: 0;
-o-transform: scale(0) translateX(1000px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(0);
}
}
@keyframes zoomInRightLarge {
0% {
opacity: 0;
transform: scale(0) translateX(1000px);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
.animate.zoomInRightLarge {
-webkit-animation-name: zoomInRightLarge;
-moz-animation-name: zoomInRightLarge;
-ms-animation-name: zoomInRightLarge;
-o-animation-name: zoomInRightLarge;
animation-name: zoomInRightLarge;
}
/* #Zoom Out
// ================================================== */
@-webkit-keyframes zoomOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0);
}
}
@-moz-keyframes zoomOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0);
}
}
@-ms-keyframes zoomOut {
0% {
opacity: 1;
-ms-transform: scale(1);
}
100% {
opacity: 0;
-ms-transform: scale(0);
}
}
@-o-keyframes zoomOut {
0% {
opacity: 1;
-o-transform: scale(1);
}
100% {
opacity: 0;
-o-transform: scale(0);
}
}
@keyframes zoomOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
.animate.zoomOut {
-webkit-animation-name: zoomOut;
-moz-animation-name: zoomOut;
-ms-animation-name: zoomOut;
-o-animation-name: zoomOut;
animation-name: zoomOut;
}
/* #Zoom Out Up
// ================================================== */
@-webkit-keyframes zoomOutUp {
0% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(0) translateY(-200px);
}
}
@-moz-keyframes zoomOutUp {
0% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-moz-transform: scale(0) translateY(-200px);
}
}
@-ms-keyframes zoomOutUp {
0% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-ms-transform: scale(0) translateY(-200px);
}
}
@-o-keyframes zoomOutUp {
0% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-o-transform: scale(0) translateY(-200px);
}
}
@keyframes zoomOutUp {
0% {
opacity: 1;
transform: scale(1) translateY(0);
}
100% {
opacity: 0;
transform: scale(0) translateY(-200px);
}
}
.animate.zoomOutUp {
-webkit-animation-name: zoomOutUp;
-moz-animation-name: zoomOutUp;
-ms-animation-name: zoomOutUp;
-o-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
/* #Zoom Out Down
// ================================================== */
@-webkit-keyframes zoomOutDown {
0% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(0) translateY(200px);
}
}
@-moz-keyframes zoomOutDown {
0% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-moz-transform: scale(0) translateY(200px);
}
}
@-ms-keyframes zoomOutDown {
0% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-ms-transform: scale(0) translateY(200px);
}
}
@-o-keyframes zoomOutDown {
0% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-o-transform: scale(0) translateY(200px);
}
}
@keyframes zoomOutDown {
0% {
opacity: 1;
transform: scale(1) translateY(0);
}
100% {
opacity: 0;
transform: scale(0) translateY(200px);
}
}
.animate.zoomOutDown {
-webkit-animation-name: zoomOutDown;
-moz-animation-name: zoomOutDown;
-ms-animation-name: zoomOutDown;
-o-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
/* #Zoom Out Left
// ================================================== */
@-webkit-keyframes zoomOutLeft {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(-200px);
}
}
@-moz-keyframes zoomOutLeft {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(-200px);
}
}
@-ms-keyframes zoomOutLeft {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(-200px);
}
}
@-o-keyframes zoomOutLeft {
0% {
opacity: 0;
-o-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(-200px);
}
}
@keyframes zoomOutLeft {
0% {
opacity: 0;
transform: scale(0) translateX(0);
}
100% {
opacity: 1;
transform: scale(1) translateX(-200px);
}
}
.animate.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
-moz-animation-name: zoomOutLeft;
-ms-animation-name: zoomOutLeft;
-o-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
/* #Zoom Out Right
// ================================================== */
@-webkit-keyframes zoomOutRight {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(200px);
}
}
@-moz-keyframes zoomOutRight {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(200px);
}
}
@-ms-keyframes zoomOutRight {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(200px);
}
}
@-o-keyframes zoomOutRight {
0% {
opacity: 0;
-o-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(200px);
}
}
@keyframes zoomOutRight {
0% {
opacity: 0;
transform: scale(0) translateX(0);
}
100% {
opacity: 1;
transform: scale(1) translateX(200px);
}
}
.animate.zoomOutRight {
-webkit-animation-name: zoomOutRight;
-moz-animation-name: zoomOutRight;
-ms-animation-name: zoomOutRight;
-o-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
/* #Zoom Out Up Large
// ================================================== */
@-webkit-keyframes zoomOutUpLarge {
0% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(0) translateY(-1000px);
}
}
@-moz-keyframes zoomOutUpLarge {
0% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-moz-transform: scale(0) translateY(-1000px);
}
}
@-ms-keyframes zoomOutUpLarge {
0% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-ms-transform: scale(0) translateY(-1000px);
}
}
@-o-keyframes zoomOutUpLarge {
0% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-o-transform: scale(0) translateY(-1000px);
}
}
@keyframes zoomOutUpLarge {
0% {
opacity: 1;
transform: scale(1) translateY(0);
}
100% {
opacity: 0;
transform: scale(0) translateY(-1000px);
}
}
.animate.zoomOutUpLarge {
-webkit-animation-name: zoomOutUpLarge;
-moz-animation-name: zoomOutUpLarge;
-ms-animation-name: zoomOutUpLarge;
-o-animation-name: zoomOutUpLarge;
animation-name: zoomOutUpLarge;
}
/* #Zoom Out Down Large
// ================================================== */
@-webkit-keyframes zoomOutDownLarge {
0% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(0) translateY(1000px);
}
}
@-moz-keyframes zoomOutDownLarge {
0% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-moz-transform: scale(0) translateY(1000px);
}
}
@-ms-keyframes zoomOutDownLarge {
0% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-ms-transform: scale(0) translateY(1000px);
}
}
@-o-keyframes zoomOutDownLarge {
0% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
100% {
opacity: 0;
-o-transform: scale(0) translateY(1000px);
}
}
@keyframes zoomOutDownLarge {
0% {
opacity: 1;
transform: scale(1) translateY(0);
}
100% {
opacity: 0;
transform: scale(0) translateY(1000px);
}
}
.animate.zoomOutDownLarge {
-webkit-animation-name: zoomOutDownLarge;
-moz-animation-name: zoomOutDownLarge;
-ms-animation-name: zoomOutDownLarge;
-o-animation-name: zoomOutDownLarge;
animation-name: zoomOutDownLarge;
}
/* #Zoom Out Left Large
// ================================================== */
@-webkit-keyframes zoomOutLeftLarge {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(-1000px);
}
}
@-moz-keyframes zoomOutLeftLarge {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(-1000px);
}
}
@-ms-keyframes zoomOutLeftLarge {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(-1000px);
}
}
@-o-keyframes zoomOutLeftLarge {
0% {
opacity: 0;
-o-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(-1000px);
}
}
@keyframes zoomOutLeftLarge {
0% {
opacity: 0;
transform: scale(0) translateX(0);
}
100% {
opacity: 1;
transform: scale(1) translateX(-1000px);
}
}
.animate.zoomOutLeftLarge {
-webkit-animation-name: zoomOutLeftLarge;
-moz-animation-name: zoomOutLeftLarge;
-ms-animation-name: zoomOutLeftLarge;
-o-animation-name: zoomOutLeftLarge;
animation-name: zoomOutLeftLarge;
}
/* #Zoom Out Right Large
// ================================================== */
@-webkit-keyframes zoomOutRightLarge {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(1000px);
}
}
@-moz-keyframes zoomOutRightLarge {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(1000px);
}
}
@-ms-keyframes zoomOutRightLarge {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(1000px);
}
}
@-o-keyframes zoomOutRightLarge {
0% {
opacity: 0;
-o-transform: scale(0) translateX(0);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(1000px);
}
}
@keyframes zoomOutRightLarge {
0% {
opacity: 0;
transform: scale(0) translateX(0);
}
100% {
opacity: 1;
transform: scale(1) translateX(1000px);
}
}
.animate.zoomOutRightLarge {
-webkit-animation-name: zoomOutRightLarge;
-moz-animation-name: zoomOutRightLarge;
-ms-animation-name: zoomOutRightLarge;
-o-animation-name: zoomOutRightLarge;
animation-name: zoomOutRightLarge;
}
/* #Bounce In
// ================================================== */
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
}
70% {
opacity: 1;
-webkit-transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(0);
}
50% {
opacity: 1;
-moz-transform: scale(1.1);
}
70% {
opacity: 1;
-moz-transform: scale(.9);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@-ms-keyframes bounceIn {
0% {
opacity: 0;
-ms-transform: scale(0);
}
50% {
opacity: 1;
-ms-transform: scale(1.1);
}
70% {
opacity: 1;
-ms-transform: scale(.9);
}
100% {
opacity: 1;
-ms-transform: scale(1);
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(0);
}
50% {
opacity: 1;
-o-transform: scale(1.1);
}
70% {
opacity: 1;
-o-transform: scale(.9);
}
100% {
opacity: 1;
-o-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.1);
}
70% {
opacity: 1;
transform: scale(.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.animate.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-ms-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
/* #Bounce In Up
// ================================================== */
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(200px);
}
60% {
opacity: 1;
-webkit-transform: scale(1.1) translateY(-40px);
}
80% {
opacity: 1;
-webkit-transform: scale(.9) translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: scale(0) translateY(200px);
}
60% {
opacity: 1;
-moz-transform: scale(1.1) translateY(-40px);
}
80% {
opacity: 1;
-moz-transform: scale(.9) translateY(20px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
}
@-ms-keyframes bounceInUp {
0% {
opacity: 0;
-ms-transform: scale(0) translateY(200px);
}
60% {
opacity: 1;
-ms-transform: scale(1.1) translateY(-40px);
}
80% {
opacity: 1;
-ms-transform: scale(.9) translateY(20px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
}
@-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: scale(0) translateY(200px);
}
60% {
opacity: 1;
-o-transform: scale(1.1) translateY(-40px);
}
80% {
opacity: 1;
-o-transform: scale(.9) translateY(20px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: scale(0) translateY(200px);
}
60% {
opacity: 1;
transform: scale(1.1) translateY(-40px);
}
80% {
opacity: 1;
transform: scale(.9) translateY(20px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
/* #Bounce In Down
// ================================================== */
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(-200px);
}
60% {
opacity: 1;
-webkit-transform: scale(1.1) translateY(40px);
}
80% {
opacity: 1;
-webkit-transform: scale(.9) translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: scale(0) translateY(-200px);
}
60% {
opacity: 1;
-moz-transform: scale(1.1) translateY(40px);
}
80% {
opacity: 1;
-moz-transform: scale(.9) translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
}
@-ms-keyframes bounceInDown {
0% {
opacity: 0;
-ms-transform: scale(0) translateY(-200px);
}
60% {
opacity: 1;
-ms-transform: scale(1.1) translateY(40px);
}
80% {
opacity: 1;
-ms-transform: scale(.9) translateY(-20px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
}
@-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: scale(0) translateY(-200px);
}
60% {
opacity: 1;
-o-transform: scale(1.1) translateY(40px);
}
80% {
opacity: 1;
-o-transform: scale(.9) translateY(-20px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: scale(0) translateY(-200px);
}
60% {
opacity: 1;
transform: scale(1.1) translateY(40px);
}
80% {
opacity: 1;
transform: scale(.9) translateY(-20px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
/* #Bounce In Left
// ================================================== */
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(-200px);
}
60% {
opacity: 1;
-webkit-transform: scale(1.1) translateX(40px);
}
80% {
opacity: 1;
-webkit-transform: scale(.9) translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(-200px);
}
60% {
opacity: 1;
-moz-transform: scale(1.1) translateX(40px);
}
80% {
opacity: 1;
-moz-transform: scale(.9) translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(0);
}
}
@-ms-keyframes bounceInLeft {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(-200px);
}
60% {
opacity: 1;
-ms-transform: scale(1.1) translateX(40px);
}
80% {
opacity: 1;
-ms-transform: scale(.9) translateX(-20px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(0);
}
}
@-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: scale(0) translateX(-200px);
}
60% {
opacity: 1;
-o-transform: scale(1.1) translateX(40px);
}
80% {
opacity: 1;
-o-transform: scale(.9) translateX(-20px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: scale(0) translateX(-200px);
}
60% {
opacity: 1;
transform: scale(1.1) translateX(40px);
}
80% {
opacity: 1;
transform: scale(.9) translateX(-20px);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
.animate.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-ms-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
/* #Bounce In Right
// ================================================== */
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: scale(0) translateX(200px);
}
60% {
opacity: 1;
-webkit-transform: scale(1.1) translateX(-40px);
}
80% {
opacity: 1;
-webkit-transform: scale(.9) translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: scale(1) translateX(0);
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: scale(0) translateX(200px);
}
60% {
opacity: 1;
-moz-transform: scale(1.1) translateX(-40px);
}
80% {
opacity: 1;
-moz-transform: scale(.9) translateX(20px);
}
100% {
opacity: 1;
-moz-transform: scale(1) translateX(0);
}
}
@-ms-keyframes bounceInRight {
0% {
opacity: 0;
-ms-transform: scale(0) translateX(200px);
}
60% {
opacity: 1;
-ms-transform: scale(1.1) translateX(-40px);
}
80% {
opacity: 1;
-ms-transform: scale(.9) translateX(20px);
}
100% {
opacity: 1;
-ms-transform: scale(1) translateX(0);
}
}
@-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: scale(0) translateX(200px);
}
60% {
opacity: 1;
-o-transform: scale(1.1) translateX(-40px);
}
80% {
opacity: 1;
-o-transform: scale(.9) translateX(20px);
}
100% {
opacity: 1;
-o-transform: scale(1) translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: scale(0) translateX(200px);
}
60% {
opacity: 1;
transform: scale(1.1) translateX(-40px);
}
80% {
opacity: 1;
transform: scale(.9) translateX(20px);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
.animate.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-ms-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
/* #Bounce Out
// ================================================== */
@-webkit-keyframes bounceOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
30% {
opacity: 1;
-webkit-transform: scale(1.1);
}
50% {
opacity: 0;
-webkit-transform: scale(.9);
}
100% {
opacity: 0;
-webkit-transform: scale(0);
}
}
@-moz-keyframes bounceOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
30% {
opacity: 1;
-moz-transform: scale(1.1);
}
50% {
opacity: 0;
-moz-transform: scale(.9);
}
100% {
opacity: 0;
-moz-transform: scale(0);
}
}
@-ms-keyframes bounceOut {
0% {
opacity: 1;
-ms-transform: scale(1);
}
30% {
opacity: 1;
-ms-transform: scale(1.1);
}
50% {
opacity: 0;
-ms-transform: scale(.9);
}
100% {
opacity: 0;
-ms-transform: scale(0);
}
}
@-o-keyframes bounceOut {
0% {
opacity: 1;
-o-transform: scale(1);
}
30% {
opacity: 1;
-o-transform: scale(1.1);
}
50% {
opacity: 0;
-o-transform: scale(.9);
}
100% {
opacity: 0;
-o-transform: scale(0);
}
}
@keyframes bounceOut {
0% {
opacity: 1;
transform: scale(1);
}
30% {
opacity: 1;
transform: scale(1.1);
}
50% {
opacity: 0;
transform: scale(.9);
}
100% {
opacity: 0;
transform: scale(0);
}
}
.animate.bounceOut {
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-ms-animation-name: bounceOut;
-o-animation-name: bounceOut;
animation-name: bounceOut;
}
/* #Bounce Out Up
// ================================================== */
@-webkit-keyframes bounceOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(40px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-200px);
}
}
@-moz-keyframes bounceOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(40px);
}
100% {
opacity: 0;
-moz-transform: translateY(-200px);
}
}
@-ms-keyframes bounceOutUp {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
20% {
opacity: 1;
-ms-transform: translateY(40px);
}
100% {
opacity: 0;
-ms-transform: translateY(-200px);
}
}
@-o-keyframes bounceOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(40px);
}
100% {
opacity: 0;
-o-transform: translateY(-200px);
}
}
@keyframes bounceOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(-200px);
}
}
.animate.bounceOutUp {
-webkit-animation-name: bounceOutUp;
-moz-animation-name: bounceOutUp;
-ms-animation-name: bounceOutUp;
-o-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
/* #Bounce Out Down
// ================================================== */
@-webkit-keyframes bounceOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-40px);
}
100% {
opacity: 0;
-webkit-transform: translateY(200px);
}
}
@-moz-keyframes bounceOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(-40px);
}
100% {
opacity: 0;
-moz-transform: translateY(200px);
}
}
@-ms-keyframes bounceOutDown {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
20% {
opacity: 1;
-ms-transform: translateY(-40px);
}
100% {
opacity: 0;
-ms-transform: translateY(200px);
}
}
@-o-keyframes bounceOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(-40px);
}
100% {
opacity: 0;
-o-transform: translateY(200px);
}
}
@keyframes bounceOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-40px);
}
100% {
opacity: 0;
transform: translateY(200px);
}
}
.animate.bounceOutDown {
-webkit-animation-name: bounceOutDown;
-moz-animation-name: bounceOutDown;
-ms-animation-name: bounceOutDown;
-o-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
/* #Bounce Out Left
// ================================================== */
@-webkit-keyframes bounceOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(40px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-200px);
}
}
@-moz-keyframes bounceOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(40px);
}
100% {
opacity: 0;
-moz-transform: translateX(-200px);
}
}
@-ms-keyframes bounceOutLeft {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
20% {
opacity: 1;
-ms-transform: translateX(40px);
}
100% {
opacity: 0;
-ms-transform: translateX(-200px);
}
}
@-o-keyframes bounceOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(40px);
}
100% {
opacity: 0;
-o-transform: translateX(-200px);
}
}
@keyframes bounceOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(40px);
}
100% {
opacity: 0;
transform: translateX(-200px);
}
}
.animate.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
-moz-animation-name: bounceOutLeft;
-ms-animation-name: bounceOutLeft;
-o-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
/* #Bounce In Right
// ================================================== */
@-webkit-keyframes bounceOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-40px);
}
100% {
opacity: 0;
-webkit-transform: translateX(200px);
}
}
@-moz-keyframes bounceOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(-40px);
}
100% {
opacity: 0;
-moz-transform: translateX(200px);
}
}
@-ms-keyframes bounceOutRight {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
20% {
opacity: 1;
-ms-transform: translateX(-40px);
}
100% {
opacity: 0;
-ms-transform: translateX(200px);
}
}
@-o-keyframes bounceOutRight {
0% {
opacity: 1;
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(-40px);
}
100% {
opacity: 0;
-o-transform: translateX(200px);
}
}
@keyframes bounceOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-40px);
}
100% {
opacity: 0;
transform: translateX(200px);
}
}
.animate.bounceOutRight {
-webkit-animation-name: bounceOutRight;
-moz-animation-name: bounceOutRight;
-ms-animation-name: bounceOutRight;
-o-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
/* #Flash
// ================================================== */
@-webkit-keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@-moz-keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@-ms-keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@-o-keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
.trigger.flash,
.hover-flash:hover {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-ms-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}
/* #Strobe
// ================================================== */
@-webkit-keyframes strobe {
0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }
10%, 30%, 50%, 70%, 90% { opacity: 0; }
}
@-moz-keyframes strobe {
0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }
10%, 30%, 50%, 70%, 90% { opacity: 0; }
}
@-ms-keyframes strobe {
0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }
10%, 30%, 50%, 70%, 90% { opacity: 0; }
}
@-o-keyframes strobe {
0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }
10%, 30%, 50%, 70%, 90% { opacity: 0; }
}
@keyframes strobe {
0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }
10%, 30%, 50%, 70%, 90% { opacity: 0; }
}
.trigger.strobe,
.hover-strobe:hover {
-webkit-animation-name: strobe;
-moz-animation-name: strobe;
-ms-animation-name: strobe;
-o-animation-name: strobe;
animation-name: strobe;
}
/* #Shake Horizontally
// ================================================== */
@-webkit-keyframes shakeH {
0%, 100% { -webkit-transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); }
20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); }
}
@-moz-keyframes shakeH {
0%, 100% { -moz-transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); }
20%, 40%, 60%, 80% { -moz-transform: translateX(10px); }
}
@-ms-keyframes shakeH {
0%, 100% { -ms-transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px); }
20%, 40%, 60%, 80% { -ms-transform: translateX(10px); }
}
@-o-keyframes shakeH {
0%, 100% { -o-transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); }
20%, 40%, 60%, 80% { -o-transform: translateX(10px); }
}
@keyframes shakeH {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.trigger.shakeH,
.hover-shakeH:hover {
-webkit-animation-name: shakeH;
-moz-animation-name: shakeH;
-ms-animation-name: shakeH;
-o-animation-name: shakeH;
animation-name: shakeH;
}
/* #Shake Vertically
// ================================================== */
@-webkit-keyframes shakeV {
0%, 100% { -webkit-transform: translateY(0); }
10%, 30%, 50%, 70%, 90% { -webkit-transform: translateY(-10px); }
20%, 40%, 60%, 80% { -webkit-transform: translateY(10px); }
}
@-moz-keyframes shakeV {
0%, 100% { -moz-transform: translateY(0); }
10%, 30%, 50%, 70%, 90% { -moz-transform: translateY(-10px); }
20%, 40%, 60%, 80% { -moz-transform: translateY(10px); }
}
@-ms-keyframes shakeV {
0%, 100% { -ms-transform: translateY(0); }
10%, 30%, 50%, 70%, 90% { -ms-transform: translateY(-10px); }
20%, 40%, 60%, 80% { -ms-transform: translateY(10px); }
}
@-o-keyframes shakeV {
0%, 100% { -o-transform: translateY(0); }
10%, 30%, 50%, 70%, 90% { -o-transform: translateY(-10px); }
20%, 40%, 60%, 80% { -o-transform: translateY(10px); }
}
@keyframes shakeV {
0%, 100% { transform: translateY(0); }
10%, 30%, 50%, 70%, 90% { transform: translateY(-10px); }
20%, 40%, 60%, 80% { transform: translateY(10px); }
}
.trigger.shakeV,
.hover-shakeV:hover {
-webkit-animation-name: shakeV;
-moz-animation-name: shakeV;
-ms-animation-name: shakeV;
-o-animation-name: shakeV;
animation-name: shakeV;
}
/* #Bounce
// ================================================== */
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }
40% { -webkit-transform: translateY(-30px); }
60% { -webkit-transform: translateY(-15px); }
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); }
40% { -moz-transform: translateY(-30px); }
60% { -moz-transform: translateY(-15px); }
}
@-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% { -ms-transform: translateY(0); }
40% { -ms-transform: translateY(-30px); }
60% { -ms-transform: translateY(-15px); }
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); }
40% { -o-transform: translateY(-30px); }
60% { -o-transform: translateY(-15px); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.trigger.bounce,
.hover-bounce:hover {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-ms-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
/* #Tada
// ================================================== */
@-webkit-keyframes tada {
0%, 100% { -webkit-transform: scale(1) rotate(0); }
10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); }
}
@-moz-keyframes tada {
0%, 100% { -moz-transform: scale(1) rotate(0); }
10%, 20% { -moz-transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg); }
}
@-ms-keyframes tada {
0%, 100% { -ms-transform: scale(1) rotate(0); }
10%, 20% { -ms-transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { -ms-transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { -ms-transform: scale(1.1) rotate(-3deg); }
}
@-o-keyframes tada {
0%, 100% { -o-transform: scale(1) rotate(0); }
10%, 20% { -o-transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg); }
}
@keyframes tada {
0%, 100% { transform: scale(1) rotate(0); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
.trigger.tada,
.hover-tada:hover {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-ms-animation-name: tada;
-o-animation-name: tada;
animation-name: tada;
}
/* #Wave
// ================================================== */
@-webkit-keyframes wave {
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes wave {
20% { -moz-transform: rotate(15deg); }
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}
@-ms-keyframes wave {
20% { -ms-transform: rotate(15deg); }
40% { -ms-transform: rotate(-10deg); }
60% { -ms-transform: rotate(5deg); }
80% { -ms-transform: rotate(-5deg); }
100% { -ms-transform: rotate(0deg); }
}
@-o-keyframes wave {
20% { -o-transform: rotate(15deg); }
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}
@keyframes wave {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.hover-wave:hover {
-webkit-animation-name: wave;
-moz-animation-name: wave;
-ms-animation-name: wave;
-o-animation-name: wave;
animation-name: wave;
}
/* #Spin Clockwise
// ================================================== */
@-webkit-keyframes spinCW {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spinCW {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spinCW {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
@-o-keyframes spinCW {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
@keyframes spinCW {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.trigger.spinCW,
.hover-spinCW:hover {
-webkit-animation-name: spinCW;
-moz-animation-name: spinCW;
-ms-animation-name: spinCW;
-o-animation-name: spinCW;
animation-name: spinCW;
}
/* #Spin Counter-Clockwise
// ================================================== */
@-webkit-keyframes spinCCW {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes spinCCW {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(-360deg); }
}
@-ms-keyframes spinCCW {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(-360deg); }
}
@-o-keyframes spinCCW {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(-360deg); }
}
@keyframes spinCCW {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
.trigger.spinCCW,
.hover-spinCCW:hover {
-webkit-animation-name: spinCCW;
-moz-animation-name: spinCCW;
-ms-animation-name: spinCCW;
-o-animation-name: spinCCW;
animation-name: spinCCW;
}
/* #Slingshot Clockwise
// ================================================== */
@-webkit-keyframes slingshotCW {
0% { -webkit-transform: rotate(0deg); }
20%, 30% { -webkit-transform: rotate(-45deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes slingshotCW {
0% { -moz-transform: rotate(0deg); }
20%, 30% { -moz-transform: rotate(-45deg); }
100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes slingshotCW {
0% { -ms-transform: rotate(0deg); }
20%, 30% { -ms-transform: rotate(-45deg); }
100% { -ms-transform: rotate(360deg); }
}
@-o-keyframes slingshotCW {
0% { -o-transform: rotate(0deg); }
20%, 30% { -o-transform: rotate(-45deg); }
100% { -o-transform: rotate(360deg); }
}
@keyframes slingshotCW {
0% { transform: rotate(0deg); }
20%, 30% { transform: rotate(-45deg); }
100% { transform: rotate(360deg); }
}
.trigger.slingshotCW,
.hover-slingshotCW:hover {
-webkit-animation-name: slingshotCW;
-moz-animation-name: slingshotCW;
-ms-animation-name: slingshotCW;
-o-animation-name: slingshotCW;
animation-name: slingshotCW;
}
/* #Slingshot Counter-Clockwise
// ================================================== */
@-webkit-keyframes slingshotCCW {
0% { -webkit-transform: rotate(0deg); }
20%, 30% { -webkit-transform: rotate(45deg); }
100% { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes slingshotCCW {
0% { -moz-transform: rotate(0deg); }
20%, 30% { -moz-transform: rotate(45deg); }
100% { -moz-transform: rotate(-360deg); }
}
@-ms-keyframes slingshotCCW {
0% { -ms-transform: rotate(0deg); }
20%, 30% { -ms-transform: rotate(45deg); }
100% { -ms-transform: rotate(-360deg); }
}
@-o-keyframes slingshotCCW {
0% { -o-transform: rotate(0deg); }
20%, 30% { -o-transform: rotate(45deg); }
100% { -o-transform: rotate(-360deg); }
}
@keyframes slingshotCCW {
0% { transform: rotate(0deg); }
20%, 30% { transform: rotate(45deg); }
100% { transform: rotate(-360deg); }
}
.trigger.slingshotCCW,
.hover-slingshotCCW:hover {
-webkit-animation-name: slingshotCCW;
-moz-animation-name: slingshotCCW;
-ms-animation-name: slingshotCCW;
-o-animation-name: slingshotCCW;
animation-name: slingshotCCW;
}
/* #Wobble
// ================================================== */
@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0px); }
15% { -webkit-transform: translateX(-25px) rotate(-5deg); }
30% { -webkit-transform: translateX(20px) rotate(3deg); }
45% { -webkit-transform: translateX(-15px) rotate(-3deg); }
60% { -webkit-transform: translateX(10px) rotate(2deg); }
75% { -webkit-transform: translateX(-5px) rotate(-1deg); }
100% { -webkit-transform: translateX(0px); }
}
@-moz-keyframes wobble {
0% { -moz-transform: translateX(0px); }
15% { -moz-transform: translateX(-25px) rotate(-5deg); }
30% { -moz-transform: translateX(20px) rotate(3deg); }
45% { -moz-transform: translateX(-15px) rotate(-3deg); }
60% { -moz-transform: translateX(10px) rotate(2deg); }
75% { -moz-transform: translateX(-5px) rotate(-1deg); }
100% { -moz-transform: translateX(0px); }
}
@-ms-keyframes wobble {
0% { -ms-transform: translateX(0px); }
15% { -ms-transform: translateX(-25px) rotate(-5deg); }
30% { -ms-transform: translateX(20px) rotate(3deg); }
45% { -ms-transform: translateX(-15px) rotate(-3deg); }
60% { -ms-transform: translateX(10px) rotate(2deg); }
75% { -ms-transform: translateX(-5px) rotate(-1deg); }
100% { -ms-transform: translateX(0px); }
}
@-o-keyframes wobble {
0% { -o-transform: translateX(0px); }
15% { -o-transform: translateX(-25px) rotate(-5deg); }
30% { -o-transform: translateX(20px) rotate(3deg); }
45% { -o-transform: translateX(-15px) rotate(-3deg); }
60% { -o-transform: translateX(10px) rotate(2deg); }
75% { -o-transform: translateX(-5px) rotate(-1deg); }
100% { -o-transform: translateX(0px); }
}
@keyframes wobble {
0% { transform: translateX(0px); }
15% { transform: translateX(-25px) rotate(-5deg); }
30% { transform: translateX(20px) rotate(3deg); }
45% { transform: translateX(-15px) rotate(-3deg); }
60% { transform: translateX(10px) rotate(2deg); }
75% { transform: translateX(-5px) rotate(-1deg); }
100% { transform: translateX(0px); }
}
.trigger.wobble,
.hover-wobble:hover {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-ms-animation-name: wobble;
-o-animation-name: wobble;
animation-name: wobble;
}
/* #Pulse
// ================================================== */
@-webkit-keyframes pulse {
0%, 100% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
}
@-moz-keyframes pulse {
0%, 100% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1.1); }
}
@-ms-keyframes pulse {
0%, 100% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.1); }
}
@-o-keyframes pulse {
0%, 100% { -o-transform: scale(1); }
50% { -o-transform: scale(1.1); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.trigger.pulse,
.hover-pulse:hover {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-ms-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
}
/* #Pulsate
// ================================================== */
@-webkit-keyframes pulsate {
0%, 50%, 100% { -webkit-transform: scale(1); }
25%, 75% { -webkit-transform: scale(1.1); }
}
@-moz-keyframes pulsate {
0%, 50%, 100% { -moz-transform: scale(1); }
25%, 75% { -moz-transform: scale(1.1); }
}
@-ms-keyframes pulsate {
0%, 50%, 100% { -ms-transform: scale(1); }
25%, 75% { -ms-transform: scale(1.1); }
}
@-o-keyframes pulsate {
0%, 50%, 100% { -o-transform: scale(1); }
25%, 75% { -o-transform: scale(1.1); }
}
@keyframes pulsate {
0%, 50%, 100% { transform: scale(1); }
25%, 75% { transform: scale(1.1); }
}
.trigger.pulsate,
.hover-pulsate:hover {
-webkit-animation-name: pulsate;
-moz-animation-name: pulsate;
-ms-animation-name: pulsate;
-o-animation-name: pulsate;
animation-name: pulsate;
}
/* #Heartbeat
// ================================================== */
@-webkit-keyframes heartbeat {
0%, 30%, 50%, 60%, 80% { -webkit-transform: scale(1); }
40%, 70% { -webkit-transform: scale(1.1); }
}
@-moz-keyframes heartbeat {
0%, 30%, 50%, 60%, 80% { -moz-transform: scale(1); }
40%, 70% { -moz-transform: scale(1.1); }
}
@-ms-keyframes heartbeat {
0%, 30%, 50%, 60%, 80% { -ms-transform: scale(1); }
40%, 70% { -ms-transform: scale(1.1); }
}
@-o-keyframes heartbeat {
0%, 30%, 50%, 60%, 80% { -o-transform: scale(1); }
40%, 70% { -o-transform: scale(1.1); }
}
@keyframes heartbeat {
0%, 30%, 50%, 60%, 80% { transform: scale(1); }
40%, 70% { transform: scale(1.1); }
}
.trigger.heartbeat,
.hover-heartbeat:hover {
-webkit-animation-name: heartbeat;
-moz-animation-name: heartbeat;
-ms-animation-name: heartbeat;
-o-animation-name: heartbeat;
animation-name: heartbeat;
}
/* #Panic
// ================================================== */
@-webkit-keyframes panic {
0%, 100% { -webkit-transform: scale(1) rotate(0); }
10%, 60% { -webkit-transform: scale(1.1) rotate(-3deg); }
20%, 40% { -webkit-transform: scale(1) rotate(-3deg); }
30% { -webkit-transform: scale(1.1) rotate(3deg); }
50%, 70%, 90% { -webkit-transform: scale(1) rotate(3deg); }
80% { -webkit-transform: scale(1.1) rotate(-3deg); }
}
@-moz-keyframes panic {
0%, 100% { -moz-transform: scale(1) rotate(0); }
10%, 60% { -moz-transform: scale(1.1) rotate(-3deg); }
20%, 40% { -moz-transform: scale(1) rotate(-3deg); }
30% { -moz-transform: scale(1.1) rotate(3deg); }
50%, 70%, 90% { -moz-transform: scale(1) rotate(3deg); }
80% { -moz-transform: scale(1.1) rotate(-3deg); }
}
@-ms-keyframes panic {
0%, 100% { -ms-transform: scale(1) rotate(0); }
10%, 60% { -ms-transform: scale(1.1) rotate(-3deg); }
20%, 40% { -ms-transform: scale(1) rotate(-3deg); }
30% { -ms-transform: scale(1.1) rotate(3deg); }
50%, 70%, 90% { -ms-transform: scale(1) rotate(3deg); }
80% { -ms-transform: scale(1.1) rotate(-3deg); }
}
@-o-keyframes panic {
0%, 100% { -o-transform: scale(1) rotate(0); }
10%, 60% { -o-transform: scale(1.1) rotate(-3deg); }
20%, 40% { -o-transform: scale(1) rotate(-3deg); }
30% { -o-transform: scale(1.1) rotate(3deg); }
50%, 70%, 90% { -o-transform: scale(1) rotate(3deg); }
80% { -o-transform: scale(1.1) rotate(-3deg); }
}
@keyframes panic {
0%, 100% { transform: scale(1) rotate(0); }
10%, 60% { transform: scale(1.1) rotate(-3deg); }
20%, 40% { transform: scale(1) rotate(-3deg); }
30% { transform: scale(1.1) rotate(3deg); }
50%, 70%, 90% { transform: scale(1) rotate(3deg); }
80% { transform: scale(1.1) rotate(-3deg); }
}
.trigger.panic,
.hover-panic:hover {
-webkit-animation-name: panic;
-moz-animation-name: panic;
-ms-animation-name: panic;
-o-animation-name: panic;
animation-name: panic;
}
File Manager Version 1.0, Coded By Lucas
Email: hehe@yahoo.com