CSS Animații Ghid Rapid — Complete Guide

In this tutorial, you'll learn about CSS Animații Ghid Rapid. We cover key concepts, practical examples, and best practices.

Vei învăța cum să creezi animații CSS folosind @keyframes și proprietățile animation pentru a da viață elementelor din pagină, fără JavaScript.

Problema

Tranzițiile simple nu sunt suficiente pentru efecte complexe precum mișcări continue, schimbări multiple de stare sau bucle de animație. CSS @keyframes permite definirea unor secvențe complete de animație cu puncte de control intermediare.

Rezolvare rapidă

Pasul 1: Definește keyframes

/* Greșit — reguli CSS separate fără @keyframes */
.fade-in { opacity: 0; }
.fade-in:hover { opacity: 1; }

/* Corect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Rezultat: Animația fadeIn este definită și gata de utilizare.

Pasul 2: Aplică animația pe element

.element {
    /* Greșit — lipsește durata */
    animation-name: fadeIn;
    /* Corect */
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
}

Rezultat: Elementul apare cu o tranziție lină de opacitate și poziție.

Pasul 3: Folosește shorthand-ul animation

.element {
    /* Greșit — proprietăți separate, ușor de omis */
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0.2s;
    animation-iteration-count: infinite;

    /* Corect — totul într-o singură linie */
    animation: slideIn 1s ease 0.2s infinite;
}

Rezultat: Comportament identic, cod mai curat și mai ușor de citit.

Pasul 4: Controlează stare finală cu animation-fill-mode

.element {
    /* Greșit — după animație, elementul revine la starea inițială */
    animation: fadeIn 0.5s;

    /* Corect — păstrează starea finală */
    animation: fadeIn 0.5s forwards;
}

Rezultat: Elementul rămâne vizibil după terminarea animației.

Pasul 5: Creează keyframes cu mai multe puncte de control

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.element {
    animation: pulse 2s ease-in-out infinite;
}

Rezultat: Elementul pulsează continuu, crescând și micșorându-se lin.

Prevenire

• Folosește animation shorthand pentru a nu omite proprietăți
• Adaugă forwards pentru a păstra starea finală
• Folosește transform și opacity pentru animații performante (GPU)
• Evită display: none pe elemente animate

Greșeli comune

1. Omisiunea lui animation-duration — Fără durată, animația nu se execută (durata implicită este 0s).
2. Folosirea all în keyframes — Animează prea multe proprietăți simultan, afectând performanța.
3. Animează width sau height în loc de transform — Proprietățile de layout cauzează reflow și jitter.
4. Uitarea lui forwards pentru animații de intrare — Elementul revine la starea invizibilă după animație.
5. Prea multe animații simultane — Saturarea browserului duce la frame-uri pierdute și experiență proastă.

Exercițiu

Creează un buton care pulsează la click și un indicator de loading cu 3 puncte care se aprind secvențial folosind @keyframes și animation-delay.

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.