Ostatnio edytowany:

transition

Autor: Virtual Patriot

Opis właściwości transition

Za pomocą właściwości transition możemy określić kilka różnych cech efektu przejścia interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości transition

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
  • all 0s ease 0s
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości transition

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości transition

grupa wartości

Opis

Za pomocą właściwości transition oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech efektu przejścia interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  transition:width 2s linear 1s;
}

/* REGUŁA - 2 */
div {
  transition-property:width;
  transition-duration:2s;
  transition-timing-function:linear;
  transition-delay:1s;
}

Składniki grupy wartości właściwości transition

Ważne

pierwsza napotkana w naszym zapisie liczba wraz z jednostką czasu zawsze będzie odpowiadała za wartość składnika duration

podana przez nas grupa wartości właściwości transition nie może zawierać wartości globalnych

Przykładowe zapisy

2s

2s linear

2s linear 1s

width 2s linear 1s

none

property

Składnik property nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik property określa wartość właściwości transition-property, czyli to, które właściwości CSS mogą brać udział w efekcie przejścia interesującego nas elementu HTML.

Ważne

jeżeli chcemy podać sekwencję wartości, wtedy należy skorzystać z sekwencji wartości właściwości transition

Wartość domyślna

all

duration

Składnik duration nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik duration określa wartość właściwości transition-duration, czyli czas trwania wykonywania się efektu przejścia interesującego nas elementu HTML.

Wartość domyślna

0s

timing-function

Składnik timing-function nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik timing-function określa wartość właściwości transition-timing-function, czyli tempo wykonywania się efektu przejścia interesującego nas elementu HTML.

Wartość domyślna

ease

delay

Składnik delay nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik delay określa wartość właściwości transition-delay, czyli opóźnienie lub przyspieszenie w czasie wykonywania się efektu przejścia interesującego nas elementu HTML.

Wartość domyślna

0s

Przykład

Każda właściwość CSS może brać udział w efekcie przejścia przykładowego elementu "div", który wykonuje się 2 sekundy, posiada tempo "linear" oraz jest opóźniony w czasie o 1 sekundę, ponieważ do wspomnianego elementu "div" została dodana właściwość "transition" wraz z następującą grupą wartości: "all 2s linear 1s".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transition:all 2s linear 1s;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

sekwencja wartości

Opis

Za pomocą sekwencji kilku (oddzielonych od siebie znakiem przecinka) grup wartości właściwości transition możemy określić, które właściwości CSS oraz w jaki sposób mogą brać udział w efekcie przejścia interesującego nas elementu HTML.

Przykład

W efekcie przejścia przykładowego elementu "div" mogą brać udział następujące właściwości CSS: "width", "color", "background-color", ponadto wspomniane właściwości CSS posiadają różne cechy dotyczące efektu przejścia, ponieważ do wspomnianego elementu "div" została dodana właściwość "transition" wraz z następującą sekwencją wartości: "width 1s linear, color 1s linear 1s, background-color 1s linear 2s".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transition:width 1s linear, color 1s linear 1s, background-color 1s linear 2s;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>