CSS przejścia

CSS przejścia

CSS przejścia pozwala na płynne zmienianie wartości atrybutów w określonym czasie.

Przenieś mysz nad ten element, aby zobaczyć efekt przejścia CSS:

CSS

W tym rozdziale nauczysz się takich atrybutów:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Wspieranie przejścia przez przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.

właściwości Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Jak używać CSS przejścia?

Aby stworzyć efekt przejścia, musisz jednoznacznie określić dwie rzeczy:

  • Atrybut CSS, do którego chcesz dodać efekt
  • Trwanie efektu

Uwaga:Jeśli nie określono części trwania, przejście nie będzie miało efektu, ponieważ domyślna wartość to 0.

Poniższy przykład pokazuje czerwony element <div> o wymiarach 100px * 100px. Element <div> ma również określony efekt przejścia dla atrybutu width, który trwa 2 sekundy:

przykład

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Kiedy wartość określonego atrybutu CSS (width) zmienia się, rozpoczyna się efekt przejścia.

Teraz, określmy nową wartość dla atrybutu width, gdy kursor jest nad elementem <div>:

przykład

div:hover {
  width: 300px;
}

Spróbuj sam

Proszę zauważyć, że gdy kursor odchodzi od elementu, stopniowo przywraca swój oryginalny styl.

Zmiana wartości kilku atrybutów

Poniższy przykład dodaje efekt przejścia do atrybutów szerokość i wysokość, szerokość trwa 2 sekundy, a wysokość 4 sekundy:

przykład

div {
  transition: szerokość 2s, wysokość 4s;
}

Spróbuj sam

Określenie krzywej prędkości przejścia

transition-timing-function Atrybut określa krzywą prędkości efektu przejścia.

Atrybut transition-timing-function akceptuje następujące wartości:

  • ease - Określa efekt przejścia, który zaczyna się wolno, potem przyspiesza, a następnie kończy się wolno (domyślnie)
  • liniowo - Określa efekt przejścia, który ma tę samą prędkość od początku do końca
  • ease-in - Określa efekt przejścia, który zaczyna się wolniej
  • ease-out - Określa efekt przejścia, który kończy się wolniej
  • ease-in-out - Określa efekt przejścia, który zaczyna się i kończy wolniej
  • cubic-bezier(n,n,n,n) - Pozwala na określenie własnych wartości w funkcji trójskładnikowej Beziera

Poniższe przykłady pokazują różne krzywe prędkości, które można użyć:

przykład

#div1 {transition-timing-function: liniowo;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Spróbuj sam

Opóźnienie efektu przejścia

transition-delay Atrybut określa opóźnienie efektu przejścia (w sekundach).

Poniższy przykład ma 1 sekundę opóźnienia przed uruchomieniem:

przykład

div {
  transition-delay: 1s;
}

Spróbuj sam

Przejście + przekształcenie

Poniższy przykład dodaje efekt przejścia do przekształcenia:

przykład

div {
  transition: szerokość 2s, wysokość 2s, transformacja 2s;
}

Spróbuj sam

Więcej przykładów przejścia

Możesz określić każdy atrybut przejścia CSS, jak poniżej:

przykład

div {
  transition-property: szerokość;
  transition-duration: 2s;
  transition-timing-function: liniowo;
  transition-delay: 1s;
}

Spróbuj sam

lub użyj skróconej wersji transition Atrybuty:

przykład

div {
  transition: szerokość 2s liniowo 1s;
}

Spróbuj sam

Atrybuty przejścia CSS

Poniższa tabela zawiera wszystkie atrybuty przejścia CSS:

właściwości opis
transition Skrócona właściwość, która ustawia cztery właściwości przejścia na jedną właściwość.
transition-delay Określa opóźnienie efektu przejścia w sekundach.
transition-duration Określa czas trwania efektu przejścia w sekundach lub milisekundach.
transition-property Określa nazwę CSS właściwości, na którą ma wpływ efekt przejścia.
transition-timing-function Określa krzywą prędkości efektu przejścia.