Transition CSS: jak animować zmiany właściwości bez JavaScriptu

CSS3 przyniósł sporo nowych możliwości tworzenia efektownych animacji, a jedną z najużyteczniejszych jest właściwość transition.

Transition to moduł CSS3, którym zbudujesz płynny efekt zmiany na znaczniku HTML albo na klasie. Zapis jest prosty:

transition: property duration timing-function delay;

Transition z CSS3 to świetny sposób na drobne animacje bez ani jednej linijki JavaScriptu. Zanim zaczniemy, mam poradnik CSS, w którym korzystam z tej właściwości:
Poradnik – karta (card UI) w CSS

Właściwość

Po pierwsze, żeby transition zadziałało, musisz wskazać standardową właściwość, której ma dotyczyć. W naszym przykładzie animujemy background-color. Samodzielny zapis wygląda tak:

transition-property: background-color;

Przejście

Kiedy właściwość jest już wskazana, trzeba ustalić wartość początkową i końcową. W naszym przykładzie potrzebny jest kolor startowy oraz kolor docelowy, przypisany do innego stanu elementu.
Ustawiamy więc transition na background-color, potem wartość początkową background-color na elemencie #element, a na końcu wartość docelową dla momentu, w którym użytkownik najedzie kursorem, czyli dla #element:hover:

#element {
    transition-property:background-color;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Czas trwania animacji

Mamy właściwość do animowania oraz wartość początkową i końcową, więc został czas trwania przejścia. Podajemy go w sekundach albo w milisekundach:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Oznacza to, że div #element zmieni background-color w ciągu 200 milisekund (0,2 sekundy).

Właściwość transition-timing-function

Powyższy kod w zupełności wystarczy do zrobienia przejścia, ale możemy sięgnąć jeszcze po właściwość transition-timing-function. Zmienia ona charakter animacji. Domyślnie transition korzysta z krzywej ease. Możesz jednak wybrać jeden z pozostałych wbudowanych efektów albo opisać własny krzywą Béziera.

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

W naszym przykładzie wygląda to tak:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Opóźnienie przejścia

Podobnie jak czas trwania działa właściwość transition-delay: opóźnia moment, w którym efekt się zacznie.

transition-delay: 1s;

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    transition-delay: 1s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

···