CSS Animation-timing-function Property
Przykład
Odtwórz animację z tą samą szybkością od początku do końca:
div {
animation-timing-function: linear;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Określa krzywą animation-timing-functionprędkości animacji.
Krzywa szybkości określa CZAS, w którym animacja zmienia jeden zestaw stylów CSS na inny.
Krzywa prędkości służy do płynnego wprowadzania zmian.
| Domyślna wartość: | łatwość |
|---|---|
| Dziedziczny: | nie |
| Animowalny: | nie. Przeczytaj o animacji |
| Wersja: | CSS3 |
| Składnia JavaScript: | obiekt .style.animationTimingFunction="linear" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit-, -moz- lub -o- określają pierwszą wersję, która działała z przedrostkiem.
| Property | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Składnia CSS
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
Funkcja animacji czasu wykorzystuje funkcję matematyczną, zwaną krzywą Cubic Beziera, aby utworzyć krzywą prędkości. W tej funkcji możesz użyć własnych wartości lub użyć jednej z predefiniowanych wartości:
Wartości nieruchomości
| Value | Description | Play it |
|---|---|---|
| linear | The animation has the same speed from start to end | |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
| ease-in | The animation has a slow start | |
| ease-out | The animation has a slow end | |
| ease-in-out | The animation has both a slow start and a slow end | |
| step-start | Equivalent to steps(1, start) | |
| step-end | Equivalent to steps(1, end) | |
| steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" | |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Wskazówka: wypróbuj różne wartości w sekcji „Więcej przykładów” poniżej.
Więcej przykładów
Przykład
Aby lepiej zrozumieć różne wartości funkcji czasu;
Oto pięć różnych elementów <div> z pięcioma różnymi wartościami:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Przykład
Tak samo jak w powyższym przykładzie, ale krzywe prędkości są zdefiniowane za pomocą funkcji cube-beziera:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
Powiązane strony
Samouczek CSS: animacje CSS
Dokumentacja HTML DOM: właściwość AnimationTimingFunction