.action { transition: background-color 180ms ease, transform 180ms ease; }Numai fundalul și transformarea răspund gradual în 180ms.
LECȚIA 88 DIN 100
Tranziționează numai proprietățile necesare
Animează fundalul și transformarea fără a folosi transition: all.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Prescurtarea transition poate defini separat proprietatea, durata și funcția de timing pentru fiecare tranziție. Enumerarea proprietăților limitează munca browserului și evită animarea accidentală a altor schimbări.
.action { transition: all 180ms ease; }all poate include proprietăți neintenționate și ascunde ce anume este animat.
PASUL 2 · APLICĂ
Exercițiul tău
Setează transition pentru background-color și transform, fiecare cu 180ms ease.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Tranziția enumeră fundalul și transformarea.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Lista separată prin virgulă creează două tranziții independente și nu include alte proprietăți.