@keyframes fadeIn {
|
0% {
|
opacity: 0;
|
}
|
|
to {
|
opacity: 1;
|
}
|
}
|
|
@keyframes fadeInLeft {
|
0% {
|
opacity: 0;
|
transform: translate3d(-200px, 0, 0);
|
transform: translate3d(-200px, 0, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes fadeInRight {
|
0% {
|
opacity: 0;
|
transform: translate3d(200px, 0, 0);
|
transform: translate3d(200px, 0, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes fadeInUp {
|
0% {
|
opacity: 0;
|
transform: translate3d(0, 200px, 0);
|
transform: translate3d(0, 200px, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes fadeInDown {
|
0% {
|
opacity: 0;
|
transform: translate3d(0, -200px, 0);
|
transform: translate3d(0, -200px, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes flipInY {
|
0% {
|
transform: perspective(400px) rotateY(90deg);
|
transform: perspective(400px) rotateY(90deg);
|
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
opacity: 0;
|
}
|
|
40% {
|
transform: perspective(400px) rotateY(-20deg);
|
transform: perspective(400px) rotateY(-20deg);
|
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
}
|
|
60% {
|
transform: perspective(400px) rotateY(10deg);
|
transform: perspective(400px) rotateY(10deg);
|
opacity: 1;
|
}
|
|
80% {
|
transform: perspective(400px) rotateY(-5deg);
|
transform: perspective(400px) rotateY(-5deg);
|
}
|
|
to {
|
transform: perspective(400px);
|
transform: perspective(400px);
|
}
|
}
|
|
@keyframes bounceInLeft {
|
0%,
|
60%,
|
75%,
|
90%,
|
to {
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
}
|
|
0% {
|
opacity: 0;
|
transform: translate3d(-3000px, 0, 0);
|
transform: translate3d(-3000px, 0, 0);
|
}
|
|
60% {
|
opacity: 1;
|
transform: translate3d(25px, 0, 0);
|
transform: translate3d(25px, 0, 0);
|
}
|
|
75% {
|
transform: translate3d(-10px, 0, 0);
|
transform: translate3d(-10px, 0, 0);
|
}
|
|
90% {
|
transform: translate3d(5px, 0, 0);
|
transform: translate3d(5px, 0, 0);
|
}
|
|
to {
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes bounceInRight {
|
0%,
|
60%,
|
75%,
|
90%,
|
to {
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
}
|
|
0% {
|
opacity: 0;
|
transform: translate3d(3000px, 0, 0);
|
transform: translate3d(3000px, 0, 0);
|
}
|
|
60% {
|
opacity: 1;
|
transform: translate3d(-25px, 0, 0);
|
transform: translate3d(-25px, 0, 0);
|
}
|
|
75% {
|
transform: translate3d(10px, 0, 0);
|
transform: translate3d(10px, 0, 0);
|
}
|
|
90% {
|
transform: translate3d(-5px, 0, 0);
|
transform: translate3d(-5px, 0, 0);
|
}
|
|
to {
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes bounceInUp {
|
0%,
|
60%,
|
75%,
|
90%,
|
to {
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
}
|
|
0% {
|
opacity: 0;
|
transform: translate3d(0, 3000px, 0);
|
transform: translate3d(0, 3000px, 0);
|
}
|
|
60% {
|
opacity: 1;
|
transform: translate3d(0, -25px, 0);
|
transform: translate3d(0, -25px, 0);
|
}
|
|
75% {
|
transform: translate3d(0, 10px, 0);
|
transform: translate3d(0, 10px, 0);
|
}
|
|
90% {
|
transform: translate3d(0, -5px, 0);
|
transform: translate3d(0, -5px, 0);
|
}
|
|
to {
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes bounceInDown {
|
0%,
|
60%,
|
75%,
|
90%,
|
to {
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
}
|
|
0% {
|
opacity: 0;
|
transform: translate3d(0, -3000px, 0);
|
transform: translate3d(0, -3000px, 0);
|
}
|
|
60% {
|
opacity: 1;
|
transform: translate3d(0, 25px, 0);
|
transform: translate3d(0, 25px, 0);
|
}
|
|
75% {
|
transform: translate3d(0, -10px, 0);
|
transform: translate3d(0, -10px, 0);
|
}
|
|
90% {
|
transform: translate3d(0, 5px, 0);
|
transform: translate3d(0, 5px, 0);
|
}
|
|
to {
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes wobble {
|
0% {
|
transform: none;
|
transform: none;
|
}
|
|
15% {
|
transform: translate3d(-25%, 0, 0) rotate(-5deg);
|
transform: translate3d(-25%, 0, 0) rotate(-5deg);
|
}
|
|
30% {
|
transform: translate3d(20%, 0, 0) rotate(3deg);
|
transform: translate3d(20%, 0, 0) rotate(3deg);
|
}
|
|
45% {
|
transform: translate3d(-15%, 0, 0) rotate(-3deg);
|
transform: translate3d(-15%, 0, 0) rotate(-3deg);
|
}
|
|
60% {
|
transform: translate3d(10%, 0, 0) rotate(2deg);
|
transform: translate3d(10%, 0, 0) rotate(2deg);
|
}
|
|
75% {
|
transform: translate3d(-5%, 0, 0) rotate(-1deg);
|
transform: translate3d(-5%, 0, 0) rotate(-1deg);
|
}
|
|
to {
|
transform: none;
|
transform: none;
|
}
|
}
|
|
@keyframes rubberBand {
|
0% {
|
transform: scaleX(1);
|
transform: scaleX(1);
|
}
|
|
30% {
|
transform: scale3d(1.25, 0.75, 1);
|
transform: scale3d(1.25, 0.75, 1);
|
}
|
|
40% {
|
transform: scale3d(0.75, 1.25, 1);
|
transform: scale3d(0.75, 1.25, 1);
|
}
|
|
50% {
|
transform: scale3d(1.15, 0.85, 1);
|
transform: scale3d(1.15, 0.85, 1);
|
}
|
|
65% {
|
transform: scale3d(0.95, 1.05, 1);
|
transform: scale3d(0.95, 1.05, 1);
|
}
|
|
75% {
|
transform: scale3d(1.05, 0.95, 1);
|
transform: scale3d(1.05, 0.95, 1);
|
}
|
|
to {
|
transform: scaleX(1);
|
transform: scaleX(1);
|
}
|
}
|
|
@keyframes rotateIn {
|
0% {
|
transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
|
to {
|
transform: rotate(1turn);
|
transform: rotate(1turn);
|
}
|
}
|
|
@keyframes flip {
|
0% {
|
transform: perspective(400px) rotateY(-1turn);
|
transform: perspective(400px) rotateY(-1turn);
|
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
}
|
|
40% {
|
transform: perspective(400px) translateZ(150px) rotateY(-190deg);
|
transform: perspective(400px) translateZ(150px) rotateY(-190deg);
|
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
}
|
|
50% {
|
transform: perspective(400px) translateZ(150px) rotateY(-170deg);
|
transform: perspective(400px) translateZ(150px) rotateY(-170deg);
|
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
}
|
|
80% {
|
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
}
|
|
to {
|
transform: perspective(400px);
|
transform: perspective(400px);
|
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
}
|
}
|
|
@keyframes swing {
|
20% {
|
transform: rotate(15deg);
|
transform: rotate(15deg);
|
}
|
|
40% {
|
transform: rotate(-10deg);
|
transform: rotate(-10deg);
|
}
|
|
60% {
|
transform: rotate(5deg);
|
transform: rotate(5deg);
|
}
|
|
80% {
|
transform: rotate(-5deg);
|
transform: rotate(-5deg);
|
}
|
|
to {
|
transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
}
|
|
@keyframes flash {
|
0%,
|
50%,
|
to {
|
opacity: 1;
|
}
|
|
25%,
|
75% {
|
opacity: 0;
|
}
|
}
|
|
@keyframes slideDown {
|
0% {
|
transform-origin: 0 0;
|
transform-origin: 0 0;
|
transform: translateY(0);
|
transform: translateY(0);
|
}
|
|
to {
|
transform-origin: 0 0;
|
transform-origin: 0 0;
|
transform: translateY(100%);
|
transform: translateY(100%);
|
}
|
}
|
|
@keyframes slideUp {
|
0% {
|
transform-origin: 0 0;
|
transform-origin: 0 0;
|
transform: translateY(0);
|
transform: translateY(0);
|
}
|
|
to {
|
transform-origin: 0 0;
|
transform-origin: 0 0;
|
transform: translateY(-100%);
|
transform: translateY(-100%);
|
}
|
}
|
|
@keyframes tada {
|
0% {
|
transform: scaleX(1);
|
transform: scaleX(1);
|
}
|
|
10%,
|
20% {
|
transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
|
transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
|
}
|
|
30%,
|
50%,
|
70%,
|
90% {
|
transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
|
transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
|
}
|
|
40%,
|
60%,
|
80% {
|
transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
|
transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
|
}
|
|
to {
|
transform: scaleX(1);
|
transform: scaleX(1);
|
}
|
}
|
|
@keyframes fadeOut {
|
0% {
|
opacity: 1;
|
}
|
|
to {
|
opacity: 0;
|
}
|
}
|
|
@keyframes fadeOutLeft {
|
0% {
|
opacity: 1;
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
transform: translate3d(-100%, 0, 0);
|
}
|
}
|
|
@keyframes fadeOutRight {
|
0% {
|
opacity: 1;
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
transform: translate3d(100%, 0, 0);
|
}
|
}
|
|
@keyframes fadeOutUp {
|
0% {
|
opacity: 1;
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(0, -100%, 0);
|
transform: translate3d(0, -100%, 0);
|
}
|
}
|
|
@keyframes fadeOutDown {
|
0% {
|
opacity: 1;
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(0, 100%, 0);
|
transform: translate3d(0, 100%, 0);
|
}
|
}
|
|
@keyframes bounceOutLeft {
|
20% {
|
opacity: 1;
|
transform: translate3d(20px, 0, 0);
|
transform: translate3d(20px, 0, 0);
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(-2000px, 0, 0);
|
transform: translate3d(-2000px, 0, 0);
|
}
|
}
|
|
@keyframes bounceOutRight {
|
20% {
|
opacity: 1;
|
transform: translate3d(-20px, 0, 0);
|
transform: translate3d(-20px, 0, 0);
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(2000px, 0, 0);
|
transform: translate3d(2000px, 0, 0);
|
}
|
}
|
|
@keyframes bounceOutUp {
|
20% {
|
transform: translate3d(0, -10px, 0);
|
transform: translate3d(0, -10px, 0);
|
}
|
|
40%,
|
45% {
|
opacity: 1;
|
transform: translate3d(0, 20px, 0);
|
transform: translate3d(0, 20px, 0);
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(0, -2000px, 0);
|
transform: translate3d(0, -2000px, 0);
|
}
|
}
|
|
@keyframes bounceOutDown {
|
20% {
|
transform: translate3d(0, 10px, 0);
|
transform: translate3d(0, 10px, 0);
|
}
|
|
40%,
|
45% {
|
opacity: 1;
|
transform: translate3d(0, -20px, 0);
|
transform: translate3d(0, -20px, 0);
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(0, 2000px, 0);
|
transform: translate3d(0, 2000px, 0);
|
}
|
}
|
|
@keyframes flipOutY {
|
0% {
|
transform: perspective(400px);
|
transform: perspective(400px);
|
}
|
|
30% {
|
transform: perspective(400px) rotateY(-15deg);
|
transform: perspective(400px) rotateY(-15deg);
|
opacity: 1;
|
}
|
|
to {
|
transform: perspective(400px) rotateY(90deg);
|
transform: perspective(400px) rotateY(90deg);
|
opacity: 0;
|
}
|
}
|
