styleui-components/css/animations.css

Lightweight, modular UI component library with zero dependencies

/**
 * StyleUI Styles - Animations
 * A centralized library of keyframes and animation utility classes.
 */

/*------------------------------------*\
    #KEYFRAMES
\*------------------------------------*/

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes press {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

@keyframes progress {
    from { width: 100%; }
    to { width: 0%; }
}

/*------------------------------------*\
    #ANIMATION UTILITIES
\*------------------------------------*/

.anim-fadeIn {
    animation: fadeIn var(--transition-base) ease-out;
}

.anim-fadeOut {
    animation: fadeOut var(--transition-base) ease-out;
}

.anim-slideInUp {
    animation: slideInUp var(--transition-base) ease-out;
}

.anim-slideInRight {
    animation: slideInRight var(--transition-base) ease-out;
}

.anim-slideOutRight {
    animation: slideOutRight var(--transition-base) ease-out;
}

/*------------------------------------*\
    #TRANSITION UTILITIES
\*------------------------------------*/

/* Apply to any element to get a smooth transition on all properties */
.transition-all {
    transition: all var(--transition-base) ease;
}