Transition

Właściwość transition pozwala tworzyć animacje (efekt płynnego przejścia).

selektor { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; }

Transition-property

Transition-property – okeśla wartości, które zostaną poddane efektowi przejścia np. kolor tła (background), kolor czcionki (color), szerokość (width), długość (height)

selektor { transition-property: wartości; }

W miejsce wartości podajemy:

• wybrane wartości – np. background
• all – wszystkie wartości stylu
• none – żadne

W przykładzie poniżej zastosujemy pseudo-klasę :hover, dzięki czemu uzyskamy efekt przejścia. Zmianie ulegnie szerokość box-a i tło.

.box {
padding: 10px;
width: 150px;
height: 150px;
background: dodgerblue;
transition-property: width, background;
transition-duration: 2s;
}
.box:hover {
width: 150px;
background: silver;
}

Przykład

Transition-duration

Transition-duration – okeśla czas trwania przejścia

selektor { transition-duration: wartość; }

W poniższym przykładzie czas trwania animacji wyniesie 5s.

.box {
padding: 10px;
width: 150px;
height: 150px;
background: crimson;
transition-property: background;
transition-duration: 5s;
}
.box:hover {
background: deepskyblue;
}

Przykład

Transition-timing-function

Transition-timing-function – szybkość wykonywania przejścia w różnych fazach jego trwania

selektor { transition-timing-function: wartość; }

W miejsce wartość możemy wstawić:

• linear – stała szybkość

Przykład

• ease – szybciej na początku, wolniej pod koniec (domyślne ustawienie)

Przykład

• ease-in – wolniej na początku

Przykład

• ease-out – wolniej pod koniec

Przykład

• ease-in-out – wolniej na początku i pod koniec

Przykład

• cubic-bezier – własne ustawienie szybkości (wartości od 0 do 1)

Przykład

• step-start – pominięcie ostatniej klatki

Przykład

• step-end – pominięcie pierwszej klatki

Przykład

• steps – ilość klatek animacji

Przykład

Transition-delay

Transition-delay – opóźnienie rozpoczęcia efektu

selektor { transition-delay: wartość; }

W poniższym przykładzie czas rozpoczęcie efektu nastąpi po 2s.

.box {
padding: 10px;
width: 150px;
height: 150px;
background: limegreen;
transition-property: background;
transition-duration: 5s;
transition-delay: 2s
}
.box:hover {
background: green;
}

Przykład

Połączenie właściwości

Połączenie właściwości

selektor { transition: wartości; }

.box {
padding: 10px;
margin: 10px 0px 0px 20px;
width: 95px;
height: 95px;
background: darkgreen;
transition: width 2s ease-out 0.2s;
}
.box:hover {
width: 200px;
}

Przykład