CUSTOM ANIMATION STYLES FOR DEVELOPER

Custom_animation_styles.css

/* =========================================================
   GLOBAL ANIMATION BASE
========================================================= */
/*  animation class */
.animated {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ===============================
   Quomodo Image Animation
================================ */
.quomodo-img {
    animation-name: MoveLeft;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-delay: 0s;
    animation-direction: alternate;
}

/* =========================================================
   BASIC ENTRANCE ANIMATIONS
========================================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
.fadeInRight { animation-name: fadeInRight; }

/* =========================================================
   ZOOM ANIMATIONS
========================================================= */

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; }
}
.zoomIn { animation-name: zoomIn; }

@keyframes zoomInUp {
    from { opacity: 0; transform: translateY(100px) scale(0.7); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes zoomInDown {
    from { opacity: 0; transform: translateY(-60px) rotateX(90deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

@keyframes zoomInLeft {
    from { opacity: 0; transform: translateX(-160px) rotateY(-90deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0deg); }
}

@keyframes zoomInRight {
    from { opacity: 0; transform: translateX(160px) rotateY(90deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0deg); }
}

/* =========================================================
   SCALE & WIDTH
========================================================= */

@keyframes scaleIn {
    from { transform: translateY(20px) scale(1.1); }
    to { transform: translateY(0) scale(1); }
}
.scaleIn { animation-name: scaleIn; }

@keyframes width100 {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}

/* =========================================================
   MOVEMENT
========================================================= */

@keyframes MoveLeft {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

@keyframes MoveRight {
    from { transform: translateX(0); }
    to { transform: translateX(-100px); }
}

@keyframes MoveTop {
    from { transform: translateY(0); }
    to { transform: translateY(-100px); }
}

@keyframes MoveBottom {
    from { transform: translateY(0); }
    to { transform: translateY(100px); }
}

/* =========================================================
   CIRCULAR MOTION
========================================================= */

@keyframes MoveCircle {
    from { transform: rotate(0deg) translateX(-100%) rotate(0deg); }
    to { transform: rotate(360deg) translateX(-100%) rotate(-360deg); }
}

@keyframes MoveCircleSmall {
    from { transform: rotate(0deg) translateX(-10%) rotate(0deg); }
    to { transform: rotate(360deg) translateX(-10%) rotate(-360deg); }
}

@keyframes MoveCircle360 {
    to { transform: rotate(360deg); }
}

/* =========================================================
   PULSE / RIPPLE
========================================================= */

@keyframes pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(2.2); opacity: 0; }
}

@keyframes btnIconRipple {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(1.5); opacity: 0; }
}

/* =========================================================
   BOUNCE ALPHA
========================================================= */

@keyframes bounceAlpha {
    0% { opacity: 1; transform: translateX(0) scale(1); }
    25% { opacity: 0; transform: translateX(10px) scale(0.9); }
    55% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes bounceAlphaUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    25% { opacity: 0; transform: translateY(-10px) scale(0.9); }
    55% { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   WAVE / BORDER PULSE
========================================================= */

@keyframes pulse-border {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
    to { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* =========================================================
   LOADER
========================================================= */

@keyframes lds-dual-ring {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lds-dual-ring {
    animation: lds-dual-ring 1.2s linear infinite;
}

/* =========================================================
   BACKGROUND & GRADIENT
========================================================= */

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

@keyframes gradient {
    0% { background-position: 10% 50%; }
    50% { background-position: 90% 50%; }
    100% { background-position: 0% 50%; }
}