CSS @keyframes regler

Definition och användning

Genom att använda @keyframes-regeln kan du skapa animationer.

Principen för att skapa animationer är att gradvis förändra ett CSS-utseende till ett annat.

Under animeringsprocessen kan du flera gånger ändra detta CSS-utseende.

Ange ändringstid genom procent eller med nyckelordet "from" och "to", som är likvärdigt 0% och 100%.

0% är början av animeringen, 100% är slutet av animeringen.

Tips:För bästa stöd från webbläsare bör du alltid definiera väljare för 0% och 100%.

Tips:Använd animeringsattribut för att kontrollera animeringens utseende och binda animeringen till en väljare.

Observera:!important-regeln ignoreras i viktiga ramar (se sista exemplet på denna sida).

Se också:

CSS3Handledning:CSS3 animation

Exempel

Exempel 1

Låt div-elementet röra sig jämnt neråt:}}

@keyframes mymove {
  från {top: 0px;}
  till {top: 200px;}
}

Prova själv

Exempel 2

Lägg till flera keyframe-väljare i en animation:

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

Prova själv

Exempel 3

Ändra flera CSS-stilar i en animation:

@keyframes mymove {
  0%   {top: 0px; bakgrund: röd; bredd: 100px;}
  100% {top: 200px; bakgrund: gyllen; bredd: 300px;}
}

Prova själv

Exempel 4

Flera CSS-stilar med flera keyframe-väljare:

@keyframes mymove {
  0%   {top: 0px; left: 0px; bakgrund: röd;}
  25%  {top: 0px; left: 100px; bakgrund: blå;}
  50%  {top: 100px; left: 100px; bakgrund: gyllen;}
  75%  {top: 100px; left: 0px; bakgrund: grön;}
  100% {top: 0px; left: 0px; bakgrund: röd;}
}

Prova själv

Exempel 5

Observera:Important-regler ignoreras i nyckelramar:

@keyframes myexample {
  från {top: 0px;}
  50%  {top: 100px !important;} /* Ignorerad */
  till   {top: 200px;}
}

Prova själv

CSS-syntaks

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

Attributvärde

Värde Beskrivning
animationname Nödvändig. Definiera animeringens namn.
keyframes-selector

Nödvändig. Animeringens varaktighet i procent.

Giltiga värden:

  • 0-100%
  • från (likadet med 0%)
  • till (likadet med 100%)
css-styles Nödvändig. En eller flera giltiga CSS-stilattribut.

Browserrätning

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-