animation-timing-function
Ustala krzywą tempa animacji między klatkami kluczowymi.
- Wartość domyślna
ease- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationTimingFunction = "ease-in-out"
Przykład
#.typing {
width: 22ch;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid;
animation: type 2.5s steps(22) infinite alternate;
}
@keyframes type {
from { width: 0; }
}<style>@keyframes type-it { from { width: 0; } }</style>
<p style="margin: 0; width: 22ch; white-space: nowrap; overflow: hidden; border-right: 2px solid #a78bfa; font-family: monospace; font-size: 16px; animation: type-it 2.5s steps(22) infinite alternate;">console.log("Witaj!")</p>Definicja i zastosowanie
#Właściwość animation-timing-function określa, jak zmienia się tempo animacji. Działa tak samo jak w przejściach: linear, ease, ease-in, ease-out, ease-in-out, funkcje cubic-bezier(), linear() i steps().
Ważny szczegół: funkcja czasu dotyczy każdego odcinka między klatkami kluczowymi osobno, a nie całej animacji. Przy klatkach 0%, 50% i 100% krzywa ease zostanie zastosowana dwa razy.
Funkcję czasu można też ustawić wewnątrz klatki kluczowej, co zmienia tempo tylko do następnej klatki.
Składnia
#animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | steps(…) | cubic-bezier(…) | linear(…);Wartości
#- Stałe tempo przez cały ruch.
- Łagodny start i łagodne hamowanie.
- Pięć skokowych kroków, jak animacja klatka po klatce.
cubic-bezier(.68,-0.55,.27,1.55)
sprężyna
Cofnięcie przed ruchem i przestrzelenie na końcu.
Wartości w praktyce
#linear
.demo { animation-timing-function: linear; }ease-in-out
.demo { animation-timing-function: ease-in-out; }steps(5)
.demo { animation-timing-function: steps(5); }cubic-bezier(.68,-0.55,.27,1.55)
.demo { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Efekt pisania na maszynie to połączenie
steps()z liczbą znaków i czcionki o stałej szerokości. - Pamiętaj, że funkcja działa na każdy odcinek między klatkami osobno.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.