Reguła CSS @keyframes

Definicja i użycie

Za pomocą reguły @keyframes możesz tworzyć animacje.

Zasada tworzenia animacji polega na stopniowym zmienianiu jednego zestawu CSS na inny.

Podczas procesu animacji możesz wielokrotnie zmieniać to zestawienie CSS.

Zdefiniuj czas zmiany w procentach lub za pomocą słów kluczowych "from" i "to", co jest ekwiwalentem 0% i 100%.

0% to początek animacji, 100% to koniec animacji.

Wskazówka:Aby uzyskać najlepszą obsługę przeglądarki, zawsze definiuj selektory 0% i 100%.

Wskazówka:Użyj atrybutów animacji do kontroli wyglądu animacji, jednocześnie łącząc animację z selektorami.

Uwaga:!important reguła jest ignorowana w kluczowych klatkach (zobacz ostatni przykład na tej stronie).

Zobacz również:

Tutorial CSS3:Animacje CSS3

Przykład

Przykład 1

Rusz div element równomiernie w dół:

@keyframes mymove {
  od {top: 0px;}
  do {top: 200px;}
}

Spróbuj sam

Przykład 2

Dodanie wielu wybiorów keyframe w jednej animacji:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Spróbuj sam

Przykład 3

Zmiana wielu CSS-stylów w jednej animacji:

@keyframes mymove {
  0%   {top: 0px; background: czerwony; width: 100px;}
  100% {top: 200px; background: żółty; width: 300px;}
}

Spróbuj sam

Przykład 4

Wiele wybrań keyframe z wieloma CSS-stylami:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: czerwony;}
  25%  {top: 0px; left: 100px; background: niebieski;}
  50%  {top: 100px; left: 100px; background: żółty;}
  75%  {top: 100px; left: 0px; background: zielony;}
  100% {top: 0px; left: 0px; background: czerwony;}
}

Spróbuj sam

Przykład 5

Uwaga:Reguły !important są zignorowane w kluczowych klatkach:

@keyframes myexample {
  od {top: 0px;}
  50%  {top: 100px !important;} /* Zignorowane */
  do   {top: 200px;}
}

Spróbuj sam

Gramatyka CSS

@keyframes animationname {keyframes-selector {css-styles;}}

Wartość atrybutu

Wartość Opis
animationname Wymagane. Definiowanie nazwy animacji.
keyframes-selector

Wymagane. Procent czasu trwania animacji.

Dopuszczalne wartości:

  • 0-100%
  • od (jest to same jak 0%)
  • do (jest to same jak 100%)
css-styles Wymagane. Jedna lub kilka legalnych atrybutów stylu CSS.

Przeglądarka obsługuje

Chrome IE / Edge Firefox Safari Opera
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-