CSS Tranzicija

Dakle, prešli smo sa teksta i boja u veb dizajnu na jedinstvene bombe, eksplozije ... OK, ne toliko, ali prešli smo. CSS prati i podržava te promene i zbog toga imamo opciju tranzicije .

Ovaj post je usko povezan sa postom koji je trenutno napisan i koji se tiče transformacije (zato redovno proveravajte ovaj blog ili se samo pretplatite na naš bilten).

O tranziciji

Svojstvo tranzicije omogućava glatku promenu vrednosti svojstava CSS.
**Potrebno je definisati svojstvo koje će se promeniti i trajanje efekta.
**

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

Ove dve vrednosti mogu se definisati sa univerzalnim svojstvom transition ili sa pojedinačnim svojstvima transition-property i transition-duration.

Neke od transition-property vrednosti kojih se trenutno mogu setiti su:

• width,
• height,
• color,
• background (color, image, position) ,
• transform (in the next post),
• border (color, width),
• position (top, bottom, left, right ),
• text (size, weight, shadow, word-spacing),
• margin,
• padding,
• opacity,
• visibility,
• z-index,
• all.

Ako je vrednost definisana svojstvom, definiše listu zarezom odvojenih imena CSS svojstava kojima je namenjen efekat prelaza. Vrednost sve je podrazumevani i definiše da sve osobine koje se mogu tranzitovati u tranziciji. U ovom slučaju, sva promenjena svojstva će imati tranziciju sa istim duration ( delay i timing ako su definisana).

transition-duration svojstvo je vrlo jednostavno, definiše koliko vremena efekat tranzicije potrebno da se završi, a njegova vrednost se može definisati u sekundama (S) ili milisekundama (ms).

Više opcija tranzicije

Dodatna svojstva povezana sa prelazom su:

• transition-delay
• transition-timing-function

Veoma slično svojstvu trajanja, transition-delay definiše se sekundama ili milisekundama (ms) i određuje kada će započeti efekat prelaza. Ovo svojstvo može biti negativno, za razliku od svojstva trajanja, i ako je to slučaj, započet će delimično kroz svoj ciklus reprodukcije.

transition-timing-function svojstvo je definisano sledećim funkcijama:

• ease - polagan početak, brzi srednji, spori kraj,
• linear - konstantna brzina,
• ease-in - polagan početak, brzi kraj,
• ease-out - brzi početak, usporeni kraj,
• ease-in-out - izraženije krive ubrzanja / usporavanja koje olakšavaju,
• cubic-bezier(n, n, n, n) - možete da napišete sopstvenu funkciju definisanu sa 4 koordinate ( cubic bezier functions ).

 button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

Pomoću univerzalnog svojstva transition možete definisati sva četiri svojstva, imajte na umu da je prvi put definisano uvek transition-duration.

Moguće je postaviti višestruke prelaze. Za podelu različitih prelaza koristite ,.

   button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

Okidanje

Glavna stvar koju treba imati na umu prilikom tranzicije je da je ovo svojstvo prethodno definisano i da će se dogoditi samo ako je pokrenuto (ako se promeni svojstvo koje je definisano svojstvom prelaska).

CSS prelaze možete direktno da pokrenete pseudo-klasama poput: hover,: focus i: active ili putem JavaScript-a dodavanjem ili uklanjanjem klasa.

Zaključak

Ovo svojstvo je široko podržano, pa ga iskoristite! Ako vam je potrebna inspiracija, pogledajte ovaj primer.