CSS3 permite nu numai tintarea și mutarea blocurilor, ci și adăugarea de animații diferite la toate acestea. Și dacă încerci, poți chiar să faci lucruri foarte complicate.
Acum vom lua în considerare două opțiuni pentru crearea acestora.
Și avem nevoie să se întoarcă pătrat atunci când se deplasează peste cursor. Ok, adăugați o regulă de pseudo-clasă: hover
Funcționează dar există numai două stări: un cerc și un pătrat. Nu există o tranziție.
Adăugați-o va ajuta proprietatea tranziției.
Să presupunem că trebuie să schimbăm fără probleme starea într-o secundă:
Dacă proprietățile de tranziție sunt aceleași în ambele direcții, atunci este suficient să specificați proprietatea de tranziție a elementului principal (ca în exemplu), dar dacă acestea trebuie să fie diferite, atunci indicați fiecărei stări valoarea proprietății corespunzătoare.
Ești delicios!
Apropo, dacă animația ar trebui să se termine în același loc unde a început, nu puteți prescrie.
Bine, ne-am prescris un keyframe, ce facem acum?
Acum trebuie să numim această animație pe obiectul dorit cu proprietatea de animație.
Să presupunem că avem nevoie de o perioadă de 4 secunde, bine, infinit, desigur.
Nu sa dovedit foarte frumos, nu-i așa? Lipsa de netezime.
Trebuie să rezolvați această problemă cu valoarea funcției animație-temporizare.
Să facem animația animației să accelereze fără probleme la începutul cadrului și să încetinească la sfârșit.
Acum totul este bine.
Articole similare
Trimiteți-le prietenilor: