Ostatnio edytowany:

transition-property

Autor: Virtual Patriot

Opis właściwości transition-property

Za pomocą właściwości transition-property możemy określić, które właściwości CSS mogą brać udział w efekcie przejścia interesującego nas elementu HTML.

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

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

Interpretacja właściwości transition-property

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-property

all

Opis

Wartość all jest domyślną wartością właściwości transition-property.

Domyślnie wszystkie właściwości CSS, które mogą ulec procesowi animacji, mogą brać udział w efekcie przejścia elementu HTML.

Przykład

Zarówno właściwość "width", jak i właściwość "color", jak i właściwość "background-color" mogą brać udział w efekcie przejścia przykładowego elementu "div".

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-duration: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>

none

Opis

Za pomocą wartości none właściwości transition-property możemy sprawić, że żadna właściwość CSS nie będzie mogła brać udziału w efekcie przejścia interesującego nas elementu HTML.

Przykład

Żadna właściwość CSS nie może brać udziału w efekcie przejścia przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-property" wraz z wartością "none".

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-property:none;
        transition-duration: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>

nazwa

Opis

Za pomocą właściwości transition-property oraz nazwy istniejącej właściwości CSS możemy określić, która właściwość CSS może brać udział w efekcie przejścia interesującego nas elementu HTML.

Przykład

Tylko właściwość "width" może brać udział w efekcie przejścia przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-property" wraz z wartością "width".

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-property:width;
        transition-duration: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>

sekwencja wartości

Opis

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

Przykład

Tylko właściwość "color" oraz właściwość "background-color" mogą brać udział w efekcie przejścia przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-property" wraz z następującą sekwencją wartości: "color, background-color".

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-property:color, background-color;
        transition-duration: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>