CSS
Przejścia
Szukaj…
Składnia
- przejście: [właściwość przejścia] [czas trwania przejścia] [funkcja taktowania przejścia] [opóźnienie przejścia];
Parametry
| Parametr | Detale |
|---|---|
| właściwość przejścia | Konkretna właściwość CSS, której zmiana wartości musi zostać przeniesiona (lub) all , jeśli wszystkie zmienne właściwości muszą zostać przeniesione. |
| czas trwania przejścia | Czas trwania (lub okres) w sekundach ( s ) lub milisekundach ( ms ), przez który przejście musi nastąpić. |
| funkcja taktowania przejścia | Funkcja opisująca sposób obliczania wartości pośrednich podczas przejścia. Często stosowanymi wartościami są: ease , ease-in , ease-out , ease-in-out , linear , cubic-bezier() , steps() . Więcej informacji o różnych funkcjach taktowania można znaleźć w specyfikacjach W3C . |
| opóźnienie przejścia | Czas, który musiał upłynąć, zanim przejście może się rozpocząć. Mogą być określone w sekund ( s ) i milisekund ( ms ) |
Uwagi
Niektóre starsze przeglądarki obsługują tylko właściwości transition prefiksem dostawcy :
-
-webkit: Chrome 25-, Safari 6-, Safari i Chrome na iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- dla Androida. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Przykład:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Stenografia przejściowa
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
Ten przykład zmieni kolor tła po najechaniu div, zmiana koloru tła potrwa 1 sekundę.
Przejście (długa ręka)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- przejście-właściwość : Określa właściwości CSS, dla których służy efekt przejścia. W takim przypadku div rozszerzy się zarówno w poziomie, jak i w pionie po najechaniu kursorem.
- czas trwania przejścia : Określa czas potrzebny na przejście. W powyższym przykładzie przejścia wysokości i szerokości zajmą odpowiednio 1 sekundę i 500 milisekund.
- funkcja przejściowo-czasowa : Określa krzywą prędkości efektu przejścia. Wartość liniowa wskazuje, że przejście będzie miało tę samą prędkość od początku do końca.
- opóźnienie przejścia : Określa czas oczekiwania na rozpoczęcie efektu przejścia. W takim przypadku wysokość zacznie się natychmiast zmieniać, a szerokość zaczeka 1 sekundę.
sześcienny bezier
Funkcja cubic-bezier jest funkcją taktowania przejścia, która jest często używana do niestandardowych i płynnych przejść.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Funkcja przyjmuje cztery parametry:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Te parametry zostaną odwzorowane na punkty, które są częścią krzywej Béziera :
W przypadku CSS Krzywe Béziera P0 i P3 są zawsze w tym samym miejscu. P0 ma wartość (0,0), a P3 ma wartość (1,1), co oznacza, że parametry przekazane do funkcji sześciennej beziera mogą wynosić tylko od 0 do 1.
Jeśli przekażesz parametry, które nie znajdują się w tym przedziale, funkcja domyślnie przejdzie do przejścia linear .
Ponieważ sześcienna beziera jest najbardziej elastycznym przejściem w CSS, możesz przetłumaczyć wszystkie inne funkcje czasowe przejścia na funkcje sześciennych beziera:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)