CSS3 - Tranzicije (Transitions)

Razumijevanje CSS3 tranzicija

Uobičajeno kada se vrijednost CSS svojstva promijeni, prikazani rezultat će se trenutno ažurira. Uobičajeni primjer je promjena boje pozadine dugmeta pri zadržavanju miša. U normalnom scenariju boja pozadine dugmeta se odmah mijenja sa stare vrijednosti svojstva na novu vrijednost svojstva kada postavite kursor iznad dugmeta. CSS3 uvodi novu funkciju prelaza koja vam omogućava da tokom vremena glatko animirate svojstvo sa stare vrijednosti na novu vrijednost. Sljedeći primjer će vam pokazati kako animirati boju pozadine (background-color) HTML dugmeta pri zadržavanju miša. 

button {
    background: #fd7c2a;
    /* Za Safari 3.0+ */
    -webkit-transition-property: background;
    -webkit-transition-duration: 2s;
    /* Standardna sintaksa */
    transition-property: background;
    transition-duration: 2s;
}
button:hover {
    background: #3cc16e;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 tranzicije</title>
<style>
    button {
        color: #fff;
        border: none;
        padding: 10px 20px;
        font: bold 18px sans-serif;
        background: #fd7c2a;
        -webkit-transition: background 2s; /* Za Safari 3.0 to 6.0 */
        transition: background 2s; /* Za moderne browsere */
    }
    button:hover {
        background: #3cc16e;
    }
</style>
</head>
<body>
  <button type="button">Nanesi kursor miša</button>
</body>
</html>

Da biste izvršili prelaz, morate navesti najmanje dvije stvari - ime CSS svojstva na koje želite primijeniti efekat prelaza pomoću CSS svojstva transition-property i trajanje efekta prelaza (veće od 0) pomoću CSS svojstvo transition-duration. Međutim, sva ostala svojstva prelaza nisu obavezna, jer njihove zadane vrijednosti ne sprejčavaju prelazak.


Izvođenje višestrukih prelaza

Svako od svojstava prelaza može uzeti više od jedne vrijednosti, odvojeno zarezima, što pruža jednostavan način definisanja više prelaza odjednom s različitim postavkama. 

button {
    background: #fd7c2a;
    border: 3px solid #dc5801;
    /* Za Safari 3.0+ */
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 1s, 2s;
    /* Standardna sintaksa */
    transition-property: background, border;
    transition-duration: 1s, 2s;
}
button:hover {
    background: #3cc16e;
    border-color: #288049;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 višestruke tranzicije</title>
<style>
    button {
    color: #fff;
        padding: 10px 20px;
        font: bold 18px sans-serif;
        background: #fd7c2a;
        border: 3px solid #dc5801;
        /* Za Safari 3.0+ */
        -webkit-transition-property: background, border;
        -webkit-transition-duration: 1s, 2s;
        /* Standardna sintaksa */
        transition-property: background, border;
        transition-duration: 1s, 2s;
    }
    button:hover {
        background: #3cc16e;
        border-color: #288049;
    }
</style>
</head>
<body>
  <button type="button">Nanesi kursor miša</button>
</body>
</html>

Prelazno stenografsko svojstvo

Mnogo je svojstava koja treba uzeti u obzir prilikom primjene prelaza. Međutim, takođe je moguće specifikovati sva svojstva prelaza u jednom jedinom svojstvu kako biste skratili kod. Prelazno svojstvo je stenografsko svojstvo za postavljanje svih pojedinačnih svojstava prelaza (tj. transition-property, transition-duration, transition-timing-function, i transition-delay) odjednom prema navedenom redosljedu. Važno je pridržavati se ovog poretka za vrijednosti kada koristite ovo svojstvo. 

button {
    background: #fd7c2a;
    -webkit-transition: background 2s ease-in 0s; /* Za Safari 3.0+ */
    transition: background 2s ease-in 0s; /* Standardna sintaksa */
}
button:hover {
    background: #3cc16e;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 tranzicije stenografsko svojstvo</title>
<style>
    button {
    color: #fff;
    border: none;
        padding: 10px 20px;
        font: bold 18px sans-serif;
        background: #fd7c2a;
        -webkit-transition: background 2s ease-in 0s; /* Za Safari 3.0+ */
        transition: background 2s ease-in 0s; /* Standardna sintaksa */
    }
    button:hover {
        background: #3cc16e;
    }
</style>
</head>
<body>
  <button type="button">Nanesi kursor miša</button>
</body>
</html>

CSS3 tranzicijska svojstva

Sljedeća tabela daje kratak pregled svih svojstava prelaza:

Svojstvo Opis
transition Stenografsko svojstvo za postavljanje sva četiri pojedinačna svojstva prelaza u jednoj deklaraciji.
transition-delay Određuje kada će prelaz započeti.
transition-duration Određuje broj sekundi ili milisekundi prelaznoj animaciji koja bi trebala biti završena.
transition-property Navodi imena CSS svojstava na koja treba primijeniti efekt prelaza.
transition-timing-function Navodi kako će se izračunati srednje vrijednosti svojstava CSS-a na koje prelaz utiče.