Przykład
Najedź kursorem na <div> element, który stopniowo zmieniać szerokość od 100px do rozmiar to 300:
div
{
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Obiekt przejściowy jest skróconą własnością dla czterech właściwości przejściowych:
przejście-własność, czas przejściowy, przejście-timing-function, a przejście opóźnienia.
Note: Zawsze określić właściwość trwania przejściowego, w przeciwnym razie czas trwania wynosi 0s, a przejście będzie miało żadnego efektu.
| Domyślna wartość: | all 0s ease 0s |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.transition="all 2s" 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 | 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 duration timing-function delay|initial|inherit;wartości nieruchomości
| Wartość | Opis |
|---|---|
| transition-property | Określa nazwę właściwości CSS efekt przejścia jest dla |
| transition-duration | Określa ile sekund lub milisekund efekt przejściowy trwa do ukończenia |
| transition-timing-function | Określa krzywą efektu przejścia prędkości |
| transition-delay | Definiuje gdy efekt przejściowy rozpocznie |
| 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
Gdy <input type="text"> dostaje ostrość stopniowo zmieniać szerokość od 100px do 250px:
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
} Spróbuj sam " Podobne strony
Kurs CSS: CSS3 Transitions
Odniesienia HTML DOM: transition property