CSS @keyframes Reguła
Przykład
Spraw, aby element przesuwał się stopniowo 200px w dół:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Reguła @keyframes
określa kod animacji.
Animacja jest tworzona przez stopniową zmianę z jednego zestawu stylów CSS na inny.
Podczas animacji możesz wielokrotnie zmieniać zestaw stylów CSS.
Określ, kiedy nastąpi zmiana stylu, w procentach lub za pomocą słów kluczowych „od” i „do”, co jest tym samym co 0% i 100%. 0% to początek animacji, 100% to zakończenie animacji.
Wskazówka: Aby zapewnić najlepszą obsługę przeglądarek, zawsze należy zdefiniować selektory 0% i 100%.
Uwaga: Użyj właściwości animacji, aby kontrolować wygląd animacji, a także powiązać animację z selektorami.
Uwaga: !ważna reguła jest ignorowana w klatce kluczowej (patrz ostatni przykład na tej stronie).
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje regułę.
Liczby, po których następuje -webkit-, -moz- lub -o- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
@keyframes | 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
@keyframes animationname {keyframes-selector {css-styles;}}
Wartości nieruchomości
Value | Description |
---|---|
animationname | Required. Defines the name of the animation. |
keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
css-styles | Required. One or more legal CSS style properties |
Więcej przykładów
Przykład
Dodaj wiele selektorów klatek kluczowych w jednej animacji:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Przykład
Zmień wiele stylów CSS w jednej animacji:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Przykład
Wiele selektorów klatek kluczowych z wieloma stylami CSS:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Przykład
Uwaga: !ważna reguła jest ignorowana w klatce kluczowej:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Powiązane strony
Samouczek CSS: animacje CSS