@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
60% {
opacity: 1;
transform: translateX(25%);
}
80% {
transform: translateX(-10%);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
animation: bounceInLeft 1s ease;
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(100%);
}
60% {
opacity: 1;
transform: translateX(-25%);
}
80% {
transform: translateX(10%);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
animation: bounceInRight 1s ease;
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(500px);
}
60% {
opacity: 1;
transform: translateY(-20px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
animation: bounceInUp 1s ease;
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-500px);
}
60% {
opacity: 1;
transform: translateY(20px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
animation: bounceInDown 1s ease;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.zoomIn {
animation: zoomIn 1s ease;
}
@keyframes zoomOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
.zoomOut {
animation: zoomOut 1s ease;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
animation: fadeInDown 1s ease;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
animation: fadeInUp 1s ease;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
animation: fadeInLeft 1s ease;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
animation: fadeInRight 1s ease;
}
@keyframes flip-up {
0% {
transform: perspective(400px) rotateX(0);
}
100% {
transform: perspective(400px) rotateX(-180deg);
}
}
.flip-up {
animation: flip-up 1s ease;
}