Tranziții CSS Ghid Rapid — Complete Guide

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

Vei învăța cum să folosești tranzițiile CSS pentru a crea efecte line între stări, de la hover-uri simple până la animații complexe cu întârziere și curbe personalizate de timing.

Problema

Schimbările bruște de stil la hover, focus sau alte evenimente par nenaturale și neatractive. Un buton care își schimbă culoarea instantaneu sau un meniu care apare brusc oferă o experiență slabă. Tranzițiile CSS rezolvă această problemă prin interpolarea lină între stări.

Rezolvare rapidă

Pasul 1: Definește tranziția pe element

.button {
    background: #3498db;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Greșit — schimbare bruscă */
.button:hover {
    background: #2980b9;
}

/* Corect — tranziție lină */
.button {
    transition: background 0.3s ease;
}
.button:hover {
    background: #2980b9;
}

Rezultat: Fundalul butonului se schimbă lin în 0.3 secunde la hover.

Pasul 2: Folosește transition-property specific

/* Greșit — transition: all (animă totul, posibil scăderi de performanță) */
.card {
    transition: all 0.3s ease;
}

/* Corect — doar proprietățile care se schimbă */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

Rezultat: Cardul se ridică lin la hover, fără a anima proprietăți inutile.

Pasul 3: Configurează timing-function

.element {
    /* Greșit — timing implicit linear */
    transition: opacity 0.5s linear;
    /* Corect — easing natural */
    transition: opacity 0.5s ease-in-out;
    /* Accelerare la început, decelerare la sfârșit */
    transition: transform 0.3s ease-out;
    /* Curba cubică personalizată */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Rezultat: Mișcarea pare naturală, cu accelerare și decelerare similară mișcărilor fizice.

Pasul 4: Adaugă întârziere cu transition-delay

.menu-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
}

/* Greșit — toate elementele apar simultan */
.menu-item:nth-child(1) { transition-delay: 0s; }
.menu-item:nth-child(2) { transition-delay: 0s; }
.menu-item:nth-child(3) { transition-delay: 0s; }

/* Corect — efect cascadă */
.menu-item:nth-child(1) { transition-delay: 0.05s; }
.menu-item:nth-child(2) { transition-delay: 0.1s; }
.menu-item:nth-child(3) { transition-delay: 0.15s; }
.menu-item:nth-child(4) { transition-delay: 0.2s; }
.menu-item:nth-child(5) { transition-delay: 0.25s; }

.menu.open .menu-item {
    opacity: 1;
    transform: translateY(0);
}

Rezultat: Elementele apar unul după altul, creând un efect vizual plăcut.

Pasul 5: Tranziții multiple cu proprietăți diferite

.button {
    transition:
        background 0.3s ease,
        transform 0.2s ease-out,
        box-shadow 0.3s ease 0.1s; /* cu delay */
}

.button:hover {
    background: #2980b9;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

Rezultat: Fiecare proprietate are propria durată, timing și delay.

Prevenire

• Folosește proprietăți specifice în loc de all pentru performanță
• Setează tranziția pe element, nu pe starea hover
• Folosește transform și opacity pentru cele mai bune performanțe
• Testează timing-ul pe dispozitive mobile (poate părea diferit)

Greșeli comune

1. Folosirea transition: all — Animează și proprietăți care nu ar trebui și scade performanța.
2. Tranziție pe display: none — display nu poate fi tranziționat; folosește opacity și visibility.
3. Durată prea mare — Tranziții de peste 0.5s par lente pe interacțiuni funcționale.
4. Fără timing-function — Implicit este ease, dar uneori ease-out sau cubic-bezier sunt mai potrivite.
5. Tranziții pe proprietăți care cauzează reflow — width, height, margin, padding cauzează layout recalculat.

Exercițiu

Creează un buton cu 3 efecte diferite la hover: schimbare de culoare, ușoară scalare și apariția unei umbre — fiecare cu timing și delay diferit. Adaugă și un efect de intrare cascadă pentru elementele unui meniu.

Î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ă.