CSS @keyframes sääntö

Määrittely ja käyttö

Voit luoda animaatioita @keyframes-säännön avulla.

Animaation luominen perustuu siihen, että yksi CSS-tyyli muuttuu vähitellen toiseksi.

Animaatioprosessin aikana voit muuttaa useita kertoja tätä CSS-tyyliä.

Aseta muutoksen tapahtumisaika prosentteina tai avainsanoilla "from" ja "to", jotka ovat ekvivalentteja 0% ja 100%.

0% on animaation alkuaika, 100% animaation loppuaika.

Vinkki:Saadaksesi parhaan selaimesi tuen, sinun tulisi aina määritellä 0% ja 100% valitsimet.

Vinkki:Käytä animaatiotunnisteita hallitaksesi animaation ulkoasua ja sidoksesi animaation valitsimeen.

Huomaa:!important-sääntöä ei oteta huomioon animaatiokuvakkeissa (katso tämän sivun viimeinen esimerkki).

Katso myös:

CSS3-opas:CSS3 animaatio

Esimerkki

Esimerkki 1

Liikuta div-elementtiä tasaisesti alaspäin:}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Kokeile itse

Esimerkki 2

Useiden keyframe-valitsimien lisääminen yhdessä animaatiossa:

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

Kokeile itse

Esimerkki 3

Useiden CSS-tyylien muuttaminen yhdessä animaatiossa:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Kokeile itse

Esimerkki 4

Useiden CSS-tyylien useiden keyframe-valitsimien yhdistäminen:

@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;}
}

Kokeile itse

Esimerkki 5

Huomaa:!important-säännöt ohitetaan tärkeimpien aikakohdissa:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Ohitettu */
  to   {top: 200px;}
}

Kokeile itse

CSS-grammatiikka

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

Ominaisuusarvo

Arvo Kuvaus
animationname Välttämätön. Animaation nimen määrittäminen.
keyframes-selector

Välttämätön. Animaation keston prosenttiosuus.

Kelvolliset arvot:

  • 0-100%
  • from（samoin kuin 0%）
  • to（samoin kuin 100%）
css-styles Välttämätön. Yksi tai useampi kelvollinen CSS-tyyliominaisuus.

Selaimen tuki

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-