animation.css - master - axe/gala

animation.css
119 строк3 KB
gusen
app beautify
25 июн 2026, 17:57
25 июн 2026, 17:57c15e046
/* ============================================
   animations.css — анимации
   ============================================ */

/* ---------- ПОЯВЛЕНИЕ КОНТЕНТА ---------- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-pane.active {
    animation: fadeIn 0.25s ease;
}

/* ---------- ПЛАВНОЕ ПОЯВЛЕНИЕ КАРТОЧЕК ---------- */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.card {
    animation: cardAppear 0.3s ease;
}

/* ---------- ПУЛЬСАЦИЯ ДЛЯ ИКОНОК ---------- */
@keyframes pulseGlow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(99,102,241,0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 12px rgba(99,102,241,0.5));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(99,102,241,0.3));
    }
}

.builder-img:active {
    animation: pulseGlow 0.3s ease;
}

/* ---------- МИГАНИЕ ДЛЯ КНОПКИ РАССЧИТАТЬ ---------- */
@keyframes subtlePulse {
    0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    70% { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

.btn-primary:focus-visible {
    animation: subtlePulse 0.8s ease 2;
}

/* ---------- ПЛАВНОЕ ИЗМЕНЕНИЕ ЦВЕТА ---------- */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.header h1 {
    background: linear-gradient(135deg, #a78bfa, #60a5fa, #a78bfa);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 6s ease infinite;
}

/* ---------- СВЕЧЕНИЕ ПРИ НАВЕДЕНИИ ---------- */
@keyframes glowHover {
    0% { box-shadow: 0 0 8px rgba(99,102,241,0.2); }
    100% { box-shadow: 0 0 24px rgba(99,102,241,0.5); }
}

.btn-primary:hover {
    animation: glowHover 0.3s ease forwards;
}

/* ---------- ПЛАВНОЕ ПОЯВЛЕНИЕ РЕЗУЛЬТАТА ---------- */
@keyframes resultSlide {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.result {
    animation: resultSlide 0.3s ease;
}

/* ---------- СЧЁТЧИК ДЛЯ ИКОНОК (если появится) ---------- */
@keyframes countPop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.builder-count {
    animation: countPop 0.2s ease;
}