Obiekt przejścia CSS3
Przykłady
Najedź elementu div, a stopniowo zmieniać szerokość stołu z 100px na rozmiar to 300 ::
div
{
width: 100px;
Przejście: szerokość 2s;
-webkit-przejście: szerokość 2s; / * Safari * /
}
div: hover {width: 300px;}
{
width: 100px;
Przejście: szerokość 2s;
-webkit-przejście: szerokość 2s; / * Safari * /
}
div: hover {width: 300px;}
Spróbuj »
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.
Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.
属性 | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Atrybut definicje i instrukcje
Obiekt przejściowy jest skróconą własnością posiada cztery atrybuty: przejściowy własności, przejścia, czas trwania, przejścia-timing-function i przejściowych opóźnień.
Uwaga: Zawsze określić właściwość trwania przejściowego, w przeciwnym wypadku czas 0, przejście będzie miało żadnego efektu.
Domyślnie: | wszystkie 0 łatwość 0 |
---|---|
Dziedziczenie: | nie |
Wersja: | CSS3 |
Składnia JavaScript: | Obiekt .style.transition width = "2s" |
gramatyka
Przejście: nieruchomość czas opóźnienia timing-function;
值 | 描述 |
---|---|
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |