Este nevoie de proprietate CSS Tranziția pentru a instala o tranziție animată de la un stat la altul. Animație funcționează folosind pseudo: Hover și: activ. și anume când se trece un obiect de la un stat la altul.
tranziție CSS Sintaxa
Sintaxa pare destul de ustroshayusche, ci doar faptul. Să ne uităm la un exemplu simplu de modul în care funcționează. După două exemple vor fi discutate toate valorile posibile ale fiecărui element de sintaxă:
EXEMPLE de tranziție de proprietate
Exemplu # 1. Animație în HTML prin tranziție
Pe pagina este transformată în următoarele
Să examinăm acest exemplu mai detaliat. Proprietatea de tranziție: toate 1s liniară responsabil pentru o tranziție lină. Dacă el nu scrie, ar fi o tranziție bruscă. Că înțelege diferența, aici este un exemplu fără efect de animație:
Codul de tranziție: toate liniar 1s înseamnă următoarele:
- toate - acțiune lină se aplică tuturor proprietăților, se referă la culoarea (culoare), fundal (background). In schimb tot ce se poate scrie de culoare. apoi o tranziție lină se va răspândi doar pe culoarea
- 1s - timpul în care o tranziție (poate fi setat în format milisecunde: 1000ms);
- liniar - obiectul este schimbat la o viteză constantă (liniară). Există și alte opțiuni pentru efecte (care urmează să fie descrise mai jos)
Pentru toate celelalte obiecte nu sunt deplasate din cauza creșterea pătrat, puteți utiliza proprietatea proprietății de transformare.
Exemplul # 2. Creșterea obiectului HTML fără a muta alte obiecte
Pe pagina este transformată în următoarele
Acum, obiectul este crescut și nu există nici o deplasare a altor obiecte.
Să ne gândim în detaliu ce valori pot lua pe fiecare dintre parametrii
Valorile proprietăților de tranziție
1. Parametru de tranziție-proprietate
proprietate de tranziție-proprietate este responsabil de proprietățile obiectului la care este aplicat animația. Poate avea următoarele valori
- toate - pentru întregul obiect (poate fi omisă dacă timpul este setat)
- Culoare - culoarea textului
- fundal - culoarea obiectului de fundal
- lățime. înălțime - pentru a schimba dimensiunile lățime și înălțime, respectiv,
- none - nici o animație (implicit este fiecare element)
Pentru a activa mai multe proprietăți, acestea pot fi separate printr-o virgulă.
2. Parametru de tranziție-durată
Acesta specifică cantitatea de timp pe parcursul căreia ultima transformare. Se măsoară în secunde (s) și milisecunde (ms).
parametru de tranziție-durată poate specifica o proprietate separată în CSS:
3. Parametrul de tranziție-sincronizare-funcție
Acesta este un parametru important care determină modul în care rata de transformare. De exemplu, la început cu zamedleninem, sau la sfârșitul anului.
În cazul în care valoarea poate fi:
- ușura (implicit) - încetinirea în timpul pornirii și finisajul este echivalent cu parametrul cubica-Bazier (0,25, 0,1, 0,25, 1,0)
- liniar - viteză uniformă pe întreaga transformare este echivalentă cu parametrul cubica-Bazier (0,0, 0,0, 1,0, 1,0)
- ușurința în - încetinirea început, parametrul este echivalent cu cub-bezier (0,42, 0, 1,0, 1,0)
- ușura-out - la sfârșitul decelerației, parametru echivalent cub-bezier (0, 0, 0,58, 1,0)
- ușurința in-out - decelerare la începutul și la sfârșitul anului (similar pentru a ușura, dar cu diferiți coeficienți de viteză) parametru echivalent cub-bezier (0,42, 0, 0,58, 1,0)
- pas-start - start, pași echivalenți de parametri instant (1, începe)
- pas-end - execuție instantanee la etapele echivalente ale parametrilor de capăt (1, end)
- Cubic-Bezier (a1, b1, a2, b2) - o sarcină proprie rata de schimbare
- etapele (a, b) - zdruncinături o schimbare
4. Parametrul de tranziție întârziere
Setează timpul de întârziere înainte de începerea efectului de tranziție. Măsurat în secunde (s) și milisecunde (ms)
Exemplul # 3. diferite întârzieri
Mai devreme am vorbit despre posibilitatea de a stabili întârzieri diferite pentru transformările. Luați în considerare acest exemplu.
Pe pagina este transformată în următoarele
EXEMPLU întârzieri de transformare complexe
Nu toate browserele suporta transformarea. Trebuie să utilizați o versiune furnizor prefixele CSS.
- -ms-transformare origine - pentru IE9 si mai in varsta (sub versiunea nouă a transformării nu este acceptată
- -webkit-transformare-origine - pentru Chrome, Safari, Android și iOS
- -o-transformare-origine - pentru Opera la versiunea 12.10
- -Moz-transforma-origine - pentru Firefox la versiunea 16.0