355 lines
5.6 KiB
CSS
355 lines
5.6 KiB
CSS
|
/* animations.css */
|
||
|
|
||
|
/* Fade In Animation */
|
||
|
@keyframes fadeIn {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fade-in {
|
||
|
animation: fadeIn 2s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Fade Out Animation */
|
||
|
@keyframes fadeOut {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fade-out {
|
||
|
animation: fadeOut 2s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Fade In From Left */
|
||
|
@keyframes fadeInLeft {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: translateX(-20px); /* Adjust the value for the desired effect */
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: translateX(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fade-in-left {
|
||
|
animation: fadeInLeft 2s ease-in-out forwards;
|
||
|
}
|
||
|
|
||
|
/* Fade In From Right */
|
||
|
@keyframes fadeInRight {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: translateX(20px); /* Adjust the value for the desired effect */
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: translateX(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fade-in-right {
|
||
|
animation: fadeInRight 2s ease-in-out forwards;
|
||
|
}
|
||
|
|
||
|
/* Fade In From Top */
|
||
|
@keyframes fadeInTop {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: translateY(-20px); /* Adjust the value for the desired effect */
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fade-in-top {
|
||
|
animation: fadeInTop 2s ease-in-out forwards;
|
||
|
}
|
||
|
|
||
|
/* Fade In From Bottom */
|
||
|
@keyframes fadeInBottom {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: translateY(20px); /* Adjust the value for the desired effect */
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fade-in-bottom {
|
||
|
animation: fadeInBottom 2s ease-in-out forwards;
|
||
|
}
|
||
|
|
||
|
/* Fly In Animations */
|
||
|
|
||
|
/* Fly In From Left */
|
||
|
@keyframes flyInLeft {
|
||
|
from {
|
||
|
transform: translateX(-100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateX(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-in-left {
|
||
|
animation: flyInLeft 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Fly Out To Left */
|
||
|
@keyframes flyOutLeft {
|
||
|
from {
|
||
|
transform: translateX(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateX(-100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-out-left {
|
||
|
animation: flyOutLeft 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Fly In From Right */
|
||
|
@keyframes flyInRight {
|
||
|
from {
|
||
|
transform: translateX(100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateX(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-in-right {
|
||
|
animation: flyInRight 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Fly Out To Right */
|
||
|
@keyframes flyOutRight {
|
||
|
from {
|
||
|
transform: translateX(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateX(100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-out-right {
|
||
|
animation: flyOutRight 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Fly In From Top */
|
||
|
@keyframes flyInTop {
|
||
|
from {
|
||
|
transform: translateY(-100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-in-top {
|
||
|
animation: flyInTop 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Fly Out To Top */
|
||
|
@keyframes flyOutTop {
|
||
|
from {
|
||
|
transform: translateY(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(-100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-out-top {
|
||
|
animation: flyOutTop 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Fly In From Bottom */
|
||
|
@keyframes flyInBottom {
|
||
|
from {
|
||
|
transform: translateY(100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-in-bottom {
|
||
|
animation: flyInBottom 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Fly Out To Bottom */
|
||
|
@keyframes flyOutBottom {
|
||
|
from {
|
||
|
transform: translateY(0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(100%);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fly-out-bottom {
|
||
|
animation: flyOutBottom 2s ease-out;
|
||
|
}
|
||
|
|
||
|
/* Zoom In Animations */
|
||
|
|
||
|
/* Zoom In */
|
||
|
@keyframes zoomIn {
|
||
|
from {
|
||
|
transform: scale(0);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
transform: scale(1);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.zoom-in {
|
||
|
animation: zoomIn 1.5s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Zoom Out */
|
||
|
@keyframes zoomOut {
|
||
|
from {
|
||
|
transform: scale(1);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
transform: scale(0);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.zoom-out {
|
||
|
animation: zoomOut 1.5s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Spin Animations */
|
||
|
|
||
|
/* Spin Clockwise */
|
||
|
@keyframes spinClockwise {
|
||
|
from {
|
||
|
transform: rotate(0deg);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
transform: rotate(360deg);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.spin-clockwise {
|
||
|
animation: spinClockwise 2s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Spin Counterclockwise */
|
||
|
@keyframes spinCounterclockwise {
|
||
|
from {
|
||
|
transform: rotate(0deg);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
transform: rotate(-360deg);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.spin-counterclockwise {
|
||
|
animation: spinCounterclockwise 2s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Spin Out Clockwise */
|
||
|
@keyframes spinOutClockwise {
|
||
|
from {
|
||
|
transform: rotate(360deg);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
transform: rotate(0deg);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.spin-out-clockwise {
|
||
|
animation: spinOutClockwise 2s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Spin Out Counterclockwise */
|
||
|
@keyframes spinOutCounterclockwise {
|
||
|
from {
|
||
|
transform: rotate(-360deg);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
transform: rotate(0deg);
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.spin-out-counterclockwise {
|
||
|
animation: spinOutCounterclockwise 2s ease-in-out;
|
||
|
}
|
||
|
|
||
|
/* Typing Animation */
|
||
|
@keyframes typing {
|
||
|
from {
|
||
|
width: 0;
|
||
|
}
|
||
|
to {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes blinkCursor {
|
||
|
from {
|
||
|
border-right-color: rgba(0, 0, 0, 0.75);
|
||
|
}
|
||
|
to {
|
||
|
border-right-color: transparent;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.typing {
|
||
|
white-space: nowrap;
|
||
|
overflow: hidden;
|
||
|
border-right: 2px solid rgba(0, 0, 0, 0.75);
|
||
|
width: 0;
|
||
|
animation: typing 4s steps(40, end), blinkCursor 0.75s step-end infinite;
|
||
|
}
|
||
|
|
||
|
.hidden {
|
||
|
opacity: 0;
|
||
|
}
|