@charset "utf-8";
.bounce, .bounce-hover, .flash, .flash-hover, .ring, .ring-hover, .shake, .shake-hover, .swing, .swing-hover, .wobble, .wobble-hover { -webkit-animation: 1s ease; animation: 1s ease }
.bouncein, .fadein, .fadein-bottom, .fadein-left, .fadein-right, .fadein-top, .rotatein { -webkit-animation: 1s ease-out backwards; animation: 1s ease-out backwards }
.bounceout, .fadeout, .fadeout-bottom, .fadeout-left, .fadeout-right, .fadeout-top, .rotateout { -webkit-animation: 1s ease-in forwards; animation: 1s ease-in forwards }
.rotate, .rotate-hover { -webkit-animation: 2s infinite linear; animation: 2s infinite linear; display: inline-block }
.fadein { -webkit-animation-name: a-fadein; animation-name: a-fadein }
@-webkit-keyframes a-fadein {
0% {
opacity:0
}
to {
opacity:1
}
}
@keyframes a-fadein {
0% {
opacity:0
}
to {
opacity:1
}
}
.fadein-top { -webkit-animation-name: fadeinT; animation-name: fadeinT }
@-webkit-keyframes fadeinT {
0% {
opacity:0;
-webkit-transform:translateY(-50px)
}
to {
opacity:1;
-webkit-transform:translateY(0)
}
}
@keyframes fadeinT {
0% {
opacity:0;
transform:translateY(-50px)
}
to {
opacity:1;
transform:translateY(0)
}
}
.fadein-right { -webkit-animation-name: fadeinR; animation-name: fadeinR }
@-webkit-keyframes fadeinR {
0% {
opacity:0;
-webkit-transform:translateX(50px)
}
to {
opacity:1;
-webkit-transform:translateX(0)
}
}
@keyframes fadeinR {
0% {
opacity:0;
transform:translateX(50px)
}
to {
opacity:1;
transform:translateX(0)
}
}
.fadein-bottom { -webkit-animation-name: fadeinB; animation-name: fadeinB }
@-webkit-keyframes fadeinB {
0% {
opacity:0;
-webkit-transform:translateY(50px)
}
to {
opacity:1;
-webkit-transform:translateY(0)
}
}
@keyframes fadeinB {
0% {
opacity:0;
transform:translateY(50px)
}
to {
opacity:1;
transform:translateY(0)
}
}
.fadein-left { -webkit-animation-name: fadeinL; animation-name: fadeinL }
@-webkit-keyframes fadeinL {
0% {
opacity:0;
-webkit-transform:translateX(-50px)
}
to {
opacity:1;
-webkit-transform:translateX(0)
}
}
@keyframes fadeinL {
0% {
opacity:0;
transform:translateX(-50px)
}
to {
opacity:1;
transform:translateX(0)
}
}
.fadeout { -webkit-animation-name: a-fadeout; animation-name: a-fadeout }
@-webkit-keyframes a-fadeout {
0% {
opacity:1
}
to {
opacity:0
}
}
@keyframes a-fadeout {
0% {
opacity:1
}
to {
opacity:0
}
}
.fadeout-top { -webkit-animation-name: fadeoutT; animation-name: fadeoutT }
@-webkit-keyframes fadeoutT {
0% {
opacity:1;
-webkit-transform:translateY(0)
}
to {
opacity:0;
-webkit-transform:translateY(-100px)
}
}
@keyframes fadeoutT {
0% {
opacity:1;
transform:translateY(0)
}
to {
opacity:0;
transform:translateY(-100px)
}
}
.fadeout-right { -webkit-animation-name: fadeoutR; animation-name: fadeoutR }
@-webkit-keyframes fadeoutR {
0% {
opacity:1;
-webkit-transform:translateX(0)
}
to {
opacity:0;
-webkit-transform:translateX(100px)
}
}
@keyframes fadeoutR {
0% {
opacity:1;
transform:translateX(0)
}
to {
opacity:0;
transform:translateX(100px)
}
}
.fadeout-bottom { -webkit-animation-name: fadeoutB; animation-name: fadeoutB }
@-webkit-keyframes fadeoutB {
0% {
opacity:1;
-webkit-transform:translateY(0)
}
to {
opacity:0;
-webkit-transform:translateY(100px)
}
}
@keyframes fadeoutB {
0% {
opacity:1;
transform:translateY(0)
}
to {
opacity:0;
transform:translateY(100px)
}
}
.fadeout-left { -webkit-animation-name: fadeoutL; animation-name: fadeoutL }
@-webkit-keyframes fadeoutL {
0% {
opacity:1;
-webkit-transform:translateX(0)
}
to {
opacity:0;
-webkit-transform:translateX(-100px)
}
}
@keyframes fadeoutL {
0% {
opacity:1;
transform:translateX(0)
}
to {
opacity:0;
transform:translateX(-100px)
}
}
.bounce, .bounce-hover:hover { -webkit-animation-name: a-bounce; animation-name: a-bounce }
@-webkit-keyframes a-bounce {
0%, 20%, 50%, 80%, to {
-webkit-transform:translateY(0)
}
40% {
-webkit-transform:translateY(-30px)
}
60% {
-webkit-transform:translateY(-15px)
}
}
@keyframes a-bounce {
0%, 20%, 50%, 80%, to {
transform:translateY(0)
}
40% {
transform:translateY(-30px)
}
60% {
transform:translateY(-15px)
}
}
.bouncein { -webkit-animation-name: a-bouncein; animation-name: a-bouncein }
@-webkit-keyframes a-bouncein {
0% {
opacity:0;
-webkit-transform:scale(0.3)
}
50% {
opacity:1;
-webkit-transform:scale(1.05)
}
70% {
-webkit-transform:scale(0.9)
}
to {
-webkit-transform:scale(1)
}
}
@keyframes a-bouncein {
0% {
opacity:0;
transform:scale(0.3)
}
50% {
opacity:1;
transform:scale(1.05)
}
70% {
transform:scale(0.9)
}
to {
transform:scale(1)
}
}
.bounceout { -webkit-animation-name: a-bounceout; animation-name: a-bounceout }
@-webkit-keyframes a-bounceout {
0% {
-webkit-transform:scale(1)
}
25% {
-webkit-transform:scale(0.95)
}
50% {
opacity:1;
-webkit-transform:scale(1.1)
}
to {
opacity:0;
-webkit-transform:scale(0.3)
}
}
@keyframes a-bounceout {
0% {
transform:scale(1)
}
25% {
transform:scale(0.95)
}
50% {
opacity:1;
transform:scale(1.1)
}
to {
opacity:0;
transform:scale(0.3)
}
}
.rotatein { -webkit-animation-name: a-rotatein; animation-name: a-rotatein }
@-webkit-keyframes a-rotatein {
0% {
opacity:0;
-webkit-transform:rotate(-200deg)
}
to {
opacity:1;
-webkit-transform:rotate(0)
}
}
@keyframes a-rotatein {
0% {
opacity:0;
transform:rotate(-200deg)
}
to {
opacity:1;
transform:rotate(0)
}
}
.rotateout { -webkit-animation-name: a-rotateout; animation-name: a-rotateout }
@-webkit-keyframes a-rotateout {
0% {
-webkit-transform:rotate(0);
opacity:1
}
0%, to {
-webkit-transform-origin:center center
}
to {
-webkit-transform:rotate(200deg);
opacity:0
}
}
@keyframes a-rotateout {
0% {
transform-origin:center center;
transform:rotate(0);
opacity:1
}
to {
transform-origin:center center;
transform:rotate(200deg);
opacity:0
}
}
.flash, .flash-hover:hover { -webkit-animation-name: a-flash; animation-name: a-flash }
@-webkit-keyframes a-flash {
0%, 50%, to {
opacity:1
}
25%, 75% {
opacity:0
}
}
@keyframes a-flash {
0%, 50%, to {
opacity:1
}
25%, 75% {
opacity:0
}
}
.shake, .shake-hover:hover { -webkit-animation-name: a-shake; animation-name: a-shake }
@-webkit-keyframes a-shake {
0%, to {
-webkit-transform:translateX(0)
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translateX(-10px)
}
20%, 40%, 60%, 80% {
-webkit-transform:translateX(10px)
}
}
@keyframes a-shake {
0%, to {
transform:translateX(0)
}
10%, 30%, 50%, 70%, 90% {
transform:translateX(-10px)
}
20%, 40%, 60%, 80% {
transform:translateX(10px)
}
}
.swing, .swing-hover:hover { -webkit-animation-name: a-swing; animation-name: a-swing }
@-webkit-keyframes a-swing {
20% {
-webkit-transform:rotate(15deg)
}
40% {
-webkit-transform:rotate(-10deg)
}
60% {
-webkit-transform:rotate(5deg)
}
80% {
-webkit-transform:rotate(-5deg)
}
to {
-webkit-transform:rotate(0)
}
}
@keyframes a-swing {
20% {
transform:rotate(15deg)
}
40% {
transform:rotate(-10deg)
}
60% {
transform:rotate(5deg)
}
80% {
transform:rotate(-5deg)
}
to {
transform:rotate(0)
}
}
.wobble, .wobble-hover:hover { -webkit-animation-name: a-wobble; animation-name: a-wobble }
@-webkit-keyframes a-wobble {
0% {
-webkit-transform:translateX(0)
}
15% {
-webkit-transform:translateX(-50px) rotate(-5deg)
}
30% {
-webkit-transform:translateX(40px) rotate(3deg)
}
45% {
-webkit-transform:translateX(-33px) rotate(-3deg)
}
60% {
-webkit-transform:translateX(10px) rotate(2deg)
}
75% {
-webkit-transform:translateX(-10px) rotate(-1deg)
}
to {
-webkit-transform:translateX(0)
}
}
@keyframes a-wobble {
0% {
transform:translateX(0)
}
15% {
transform:translateX(-50px) rotate(-5deg)
}
30% {
transform:translateX(40px) rotate(3deg)
}
45% {
transform:translateX(-33px) rotate(-3deg)
}
60% {
transform:translateX(10px) rotate(2deg)
}
75% {
transform:translateX(-10px) rotate(-1deg)
}
to {
transform:translateX(0)
}
}
.ring, .ring-hover:hover { -webkit-animation-name: a-ring; animation-name: a-ring }
@-webkit-keyframes a-ring {
0% {
-webkit-transform:scale(1)
}
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)
}
to {
-webkit-transform:scale(1) rotate(0)
}
}
@keyframes a-ring {
0% {
transform:scale(1)
}
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)
}
to {
transform:scale(1) rotate(0)
}
}
.rotate, .rotate-hover:hover { -webkit-animation-name: a-rotate; animation-name: a-rotate }
@-webkit-keyframes a-rotate {
0% {
-webkit-transform:rotate(0deg)
}
to {
-webkit-transform:rotate(359deg)
}
}
@keyframes a-rotate {
0% {
transform:rotate(0deg)
}
to {
transform:rotate(359deg)
}
}