Przykład
Najedź kursorem na <div> elementu i zmienić szerokość o gładkiej efektu przejścia:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Obiekt przejściowy właściwość określa nazwę właściwości CSS efekt przejściowy jest za (the transition effect will start when the specified CSS property changes) .
Tip: Efekt przejściowy może zazwyczaj występuje, gdy użytkownik unosić nad elementem.
Note: Zawsze określić właściwość trwania przejściowego, w przeciwnym razie czas trwania wynosi 0, a przejście będzie miało żadnego efektu.
| Domyślna wartość: | all |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.transitionProperty="width,height" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| transition-property | 26,0 4,0 -webkit- | 10,0 | 16,0 4,0 -moz- | 6,1 3,1 -webkit- | 12,1 10,5 -o- |
Składnia CSS
transition-property: none|all|property|initial|inherit;wartości nieruchomości
| Wartość | Opis |
|---|---|
| none | No Właściciel dostanie efekt przejścia |
| all | Domyślna wartość. Wszystkie właściwości dostanie efekt przejścia |
| property | Definiuje oddzielonych przecinkami listę nazw właściwości CSS efekt przejściowy jest za |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Najedź kursorem na <div> elementu, a także zmienić szerokość i wysokość o gładkiej efektu przejścia:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Spróbuj sam " Podobne strony
Kurs CSS: CSS3 Transitions
HTML DOM referencyjny: transitionProperty property