@keyframes jetFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes jetZoomIn {
0% {
opacity: 0;
transform: scale(0.75);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes jetZoomOut {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes jetMoveUp {
0% {
opacity: 0;
transform: translateY(25px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes jetMoveUpBig {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes jetMoveDown {
0% {
opacity: 0;
transform: translateY(-25px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes jetMoveDownBig {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes jetMoveLeft {
0% {
opacity: 0;
transform: translateX(25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes jetMoveLeftBig {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes jetMoveRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes jetMoveRightBig {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes jetFallPerspective {
0% {
opacity: 0;
transform: perspective(1000px) translateY(50px) translateZ(-300px) rotateX(-35deg);
}
100% {
opacity: 1;
transform: perspective(1000px) translateY(0) translateZ(0) rotateX(0deg);
}
}
@keyframes jetFlipInX {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
transform: perspective(400px);
}
}
@keyframes jetFlipInY {
0% {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
100% {
transform: perspective(400px);
}
}