3

kurs

css

Lekcja 19: Transition

css

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;
margin: 10px 0px 0px 20px;
width: 95px;
height: 95px;
background: dodgerblue;
transition-property: width, background;
transition-duration: 2s;
}
.box:hover {
width: 150px;
background: silver;
}
Przykład

Po najechaniu kursorem, zmieni się szerokość i tło.

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;
margin: 10px 0px 0px 20px;
width: 95px;
height: 95px;
background: crimson;
transition-property: background;
transition-duration: 5s;
}
.box:hover {
background: deepskyblue;
}
Przykład

Czas trwania animacji 5s.

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

linear

  • ease - szybciej na początku, wolniej pod koniec (domyślne ustawienie)
Przykład

ease

  • ease-in - wolniej na początku
Przykład

ease-in

  • ease-out - wolniej pod koniec
Przykład

ease-out

  • ease-in-out - wolniej na początku i pod koniec
Przykład

ease-in-out

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

cubic-bezier

  • step-start - pominięcie ostatniej klatki
Przykład

step-start

  • step-end - pominięcie pierwszej klatki
Przykład

step-end

  • steps - ilość klatek animacji
Przykład

steps(5,end)

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;
margin: 10px 0px 0px 20px;
width: 95px;
height: 95px;
background: limegreen;
transition-property: background;
transition-duration: 5s;
transition-delay: 2s
}
.box:hover {
background: green;
}
Przykład

Opóźnienie rozpoczęcia animacji 2s.

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 0.5s ease-out 0.2s;
}
.box:hover {
width: 200px;
}
Przykład

Połączenie właściwości.

Prefixy

Do poprawnej obsługi właściwości transition przez różne przeglądarki należy dodać prefiksy.

selektor {
-webkit-transition: wartość;
-moz-transition: wartość;
-o-transition: wartość;
transition: wartość;
}
comments powered by Disqus

Do góry