Właściwość CSSPrzejścia
transition-property
Wskazuje, które właściwości CSS mają zmieniać się płynnie.
- Wartość domyślna
all- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.transitionProperty = "opacity, transform"
Przykład
#CSS
.link {
transition-property: color, text-decoration-color;
transition-duration: 0.2s;
}HTML przykładu
<style>
.fade-link { color: #d4d4d4; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition-property: color, text-decoration-color; transition-duration: .2s; }
.fade-link:hover { color: #fff; text-decoration-color: #a78bfa; }
</style>
<a class="fade-link" href="#">Najedź na link</a>Podgląd
Definicja i zastosowanie
#Właściwość transition-property przyjmuje listę nazw właściwości, dla których działa przejście. Pozostałe zmiany zachodzą natychmiast.
Wartość all animuje wszystko, co się zmienia i da się animować. Jest wygodna, ale może niechcący animować na przykład wysokość czy obramowanie, co bywa kosztowne i nieoczekiwane.
Nie każda właściwość jest animowalna. Na przykład display domyślnie zmienia się skokowo, choć z transition-behavior: allow-discrete można ją włączyć do przejścia.
Składnia
#Składnia
transition-property: none | all | <nazwa właściwości> [, …]*;Wartości
#- Płynnie zmienia się i położenie, i kolor.
- Płynny ruch, kolor zmienia się skokowo.
- Płynna zmiana koloru, ruch skokowy.
- Żadna zmiana nie jest płynna.
Wartości w praktyce
#all
Płynnie zmienia się i położenie, i kolor.
.demo { transition-property: all; }transform
Płynny ruch, kolor zmienia się skokowo.
.demo { transition-property: transform; }background-color
Płynna zmiana koloru, ruch skokowy.
.demo { transition-property: background-color; }none
Żadna zmiana nie jest płynna.
.demo { transition-property: none; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wymieniaj tylko te właściwości, które naprawdę mają się animować. Przejścia będą przewidywalne.
- Kolejność na liście właściwości odpowiada kolejności czasów w
transition-duration.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.