@keyframes
Definiuje kolejne etapy animacji, czyli klatki kluczowe.
- Wartość domyślna
nie dotyczy (reguła @)- Dziedziczona
- Nie
- Dotyczy
- reguła w arkuszu stylów, używana przez animation-name
- JavaScript
element.animate([{ opacity: 0 }, { opacity: 1 }], 500)
Przykład
#@keyframes shake {
0%, 100% { translate: 0; }
20%, 60% { translate: -6px; }
40%, 80% { translate: 6px; }
}
.input.error {
animation: shake 0.4s;
}<style>
@keyframes shake { 0%, 100% { translate: 0; } 20%, 60% { translate: -6px; } 40%, 80% { translate: 6px; } }
.shake { animation: shake .4s; border: 1px solid #f43f5e; }
</style>
<input class="shake" value="zły@adres" style="padding: 8px 10px; border-radius: 8px; background: #111;">
<script>
const field = document.querySelector('.shake')
setInterval(() => { field.style.animation = 'none'; field.offsetHeight; field.style.animation = '' }, 2000)
</script>Definicja i zastosowanie
#Reguła @keyframes opisuje, jak element ma wyglądać w kolejnych momentach animacji. Nadajesz jej nazwę, a potem podajesz klatki: from (0%) i to (100%) albo dowolne procenty pomiędzy.
Przeglądarka sama wylicza stany pośrednie między klatkami. Jeśli pominiesz from lub to, jako brakującą klatkę przyjmie aktualne style elementu, co pozwala tworzyć animacje „od obecnego stanu”.
Samą regułę podłączasz do elementu przez animation-name lub skrót animation. W klatkach możesz zmieniać wiele właściwości naraz, ale najpłynniej działają transform i opacity.
Składnia
#@keyframes nazwa {
from { … }
50% { … }
to { … }
}Wartości
#- Dwie klatki: początek i koniec ruchu.
procenty
Trzy klatki: w połowie element jest w prawym górnym rogu.- Ruch, zmiana koloru i obrót naraz.
od stanu obecnego
Brak klatki startowej: animacja zaczyna od zwykłych stylów elementu.
Wartości w praktyce
#from / to
@keyframes frames {
from { transform: translateX(0); }
to { transform: translateX(180px); }
}0% / 50% / 100%
@keyframes frames {
0%, 100% { transform: translate(0, 40px); }
50% { transform: translate(180px, 0); }
}wiele właściwości
@keyframes frames {
50% { transform: translateX(180px) rotate(180deg); background: #f43f5e; border-radius: 50%; }
}bez from
@keyframes frames {
to { transform: translateX(180px) scale(0.6); opacity: 0.4; }
}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
#- Nazywaj klatki kluczowe od efektu, na przykład
fade-in,shake,slide-up. Łatwo je potem wielokrotnie używać. - Te same klatki możesz połączyć przecinkiem, np.
0%, 100% { … }, gdy początek i koniec wyglądają tak samo.
Powiązane hasła
#- animationSkrót ustawiający wszystkie parametry animacji opartej na @keyframes.
- animation-nameWskazuje, które klatki kluczowe @keyframes ma odtworzyć element.
- animation-timing-functionUstala krzywą tempa animacji między klatkami kluczowymi.
- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
- @propertyRejestruje zmienną CSS z typem, wartością początkową i zasadą dziedziczenia. Taką zmienną można płynnie animować, np. kąt gradientu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.