CSS animaatiot

CSS animaatiot

CSS voi toteuttaa HTML-elementtien animaatiot ilman JavaScriptiä tai Flashia!

CSS

Tässä luvussa opit seuraavat ominaisuudet:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Selaimet tukevat animaatioita

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Ominaisuus Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Mikä on CSS-animaatio?

Animaatio muuttaa elementin hitaasti yhdestä tyylistä toiseen.

Voit muuttaa minkä tahansa CSS-ominaisuuden määrää.

CSS-animaation käyttöönotto edellyttää, että sinun on määritettävä muutamia avainsilmukohtia.

Avainsilmät sisältävät elementin tyyliä tiettyyn aikaan.

@keyframes-sääntöä

Jos käytät @keyframes Säännöt määrittelevät CSS-tyylejä, ja animaatio muuttaa hitaasti nykyisiä stilejä uusiin tyyliin tietyn ajan kuluessa.

Jotta animaatio toimisi, sen on sidottava johonkin elementtiin.

Esimerkissä "example"-animaatio sidotaan <div>-elementtiin. Animaatio kestää 4 sekuntia ja muuttaa <div>-elementin taustaväriä "red" asteittain "yellow"-väriksi:

Esimerkki

/* Animaatiokoodi */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Lisää tähän elementtiin animaatioefekti */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kokeile itse

Huomioitavaa:animation-duration Ominaisuus määrittää, kuinka kauan animaatio kestää. animation-duration Jos et aseta ominaisuutta, animaatio ei tapahdu, koska oletusarvo on 0s (0 sekuntia).

Yllä olevassa esimerkissä olemme asettaneet, milloin tyylejä muutetaan käyttämällä avainsanoja "from" ja "to" (jotka edustavat 0% (alku) ja 100% (valmis)).

Voit myös käyttää prosenttiosuuksia. Käyttämällä prosentteja voit lisätä tarpeen mukaan mukautettuja tyylejä.

Esimerkki alkaa muuttaa <div>-elementin taustaväriä, kun animaatio on saavuttanut 25%, 50% ja 100%.

Esimerkki

/* Animaatiokoodi */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Käyttää animaation elementti */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kokeile itse

Esimerkissä taustaväri ja <div>-elementin sijainti muuttuvat, kun animaatio on saavuttanut 25%, 50% ja 100%:

Esimerkki

/* Animaatiokoodi */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Käyttää animaation elementti */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kokeile itse

Viivytä animaatiota

animation-delay Atribuutti määrittää animaation alkamisen viiveen.

Esimerkissä on 2 sekunnin viive ennen animaation alkua:

Esimerkki

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Kokeile itse

Negatiiviset arvot ovat myös sallittuja. Jos käytetään negatiivista arvoa, animaatio alkaa toistua, kuin se olisi jo toistunut N sekuntia.

Esimerkissä animaatio alkaa toistua, kuin se olisi jo toistunut 2 sekuntia:

Esimerkki

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Kokeile itse

Aseta, kuinka monta kertaa animaatio tulisi suorittaa

animation-iteration-count Atribuutti määrittää, kuinka monta kertaa animaatio tulisi suorittaa.

Esimerkissä animaatio suoritetaan 3 kertaa ennen kuin se lopetetaan:

Esimerkki

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Kokeile itse

Esimerkissä käytetään arvoa "infinite" niin että animaatio jatkuu ikuisesti:

Esimerkki

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Kokeile itse

Toista taaksepäin tai vaihtelevasti

animation-direction Atribuutti määrittää, suoritetaanko animaatio eteenpäin, taaksepäin vai vaihtelevasti.

animation-direction Ominaisuus voi hyväksyä seuraavat arvot:

  • normal - Animaatio toistetaan normaalissa suunnassa (eteenpäin). Oletusarvo
  • reverse - Animaatio toistetaan vastakkaiseen suuntaan (taaksepäin)
  • alternate - Animaatio toistetaan ensin eteenpäin ja sitten taaksepäin
  • alternate-reverse - Animaatio toistetaan ensin taaksepäin ja sitten eteenpäin

Esimerkissä animaatio suoritetaan vastakkaiseen suuntaan (taaksepäin):

Esimerkki

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Kokeile itse

Esimerkissä käytetään arvoa "alternate" niin että animaatio suoritetaan ensin eteenpäin ja sitten taaksepäin:

Esimerkki

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Kokeile itse

Esimerkissä käytetään arvoa "alternate-reverse" niin että animaatio suoritetaan ensin taaksepäin ja sitten eteenpäin:

Esimerkki

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Kokeile itse

Määritä animaation nopeuskaari

animation-timing-function Ominaisuus määrittää animaation nopeuskaaren.

animation-timing-function Ominaisuus voi hyväksyä seuraavat arvot:

  • ease - Määritä alusta loppuun hitaampaa, sitten nopeampaa ja sitten jälleen hitaampaa animaatio (oletusarvo)
  • linear - Määritä alusta loppuun samaa nopeutta omaava animaatio
  • ease-in - Määritä hitaampi alku animaatio
  • ease-out - Määritä hitaampi loppu animaatio
  • ease-in-out - Määritä aluksi ja lopuksi hitaampi animaatio
  • cubic-bezier(n,n,n,n) - Määritä oma arvosi kolmanteen Bézier-funktioon määritettyyn arvoon

Seuraavat esimerkit näyttävät erilaisia nopeuskaareja, joita voidaan käyttää:

Esimerkki

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Kokeile itse

Määritä animaation täyttötila

CSS-animaatiot eivät vaikuta elementtiin ennen ensimmäisen avainruudun toistoa tai sen jälkeen viimeisen avainruudun toistoon.animation-fill-mode ominaisuus voi kattaa tämän käyttäytymisen.

Kun animaatio ei toistu (alkaen ennen, päättymisen jälkeen tai molemmista),animation-fill-mode Ominaisuus määrittää kohdeelementin tyylit.

animation-fill-mode-ominaisuus voi hyväksyä seuraavat arvot:

  • none - Oletusarvo. Animaatio ei sovellata minkäänlaista tyylejä elementtiin ennen suorittamista tai sen jälkeen.
  • forwards - Elementti säilyttää tyylivärit viimeisestä avainruudusta (riippuen animation-directionista ja animation-iteration-countista).
  • backwards - Elementti saa tyylivärit ensimmäisestä avainruudusta (riippuen animation-directionista) ja säilyttää ne animaation viivästymisen aikana.
  • both - Animaatio seuraa sekä eteen- että taaksepäin sääntöjä, laajentaen animaatiokykyjä molempiin suuntiin.

Esimerkki näyttää, kuinka <div>-elementti säilyttää viimeisen avainruudun tyylivärit arvot animaation päättymisen jälkeen:

Esimerkki

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Kokeile itse

Seuraavassa esimerkissä <div>-elementti saa ensimmäisen avainkohdan asettaman tyylin ennen animaation alkua (animoinnin viivästymisajan aikana):

Esimerkki

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Kokeile itse

Seuraavassa esimerkissä <div>-elementti saa ensimmäisen avainkohdan asettaman tyylin ennen animaation alkua ja säilyttää viimeisen avainkohdan tyylin animaation päätyttyä:

Esimerkki

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Kokeile itse

Animaation lyhennetyt ominaisuudet

Seuraavassa esimerkissä käytetään kuutta animaation ominaisuutta:

Esimerkki

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Kokeile itse

Käytetään lyhennettyä animation Ominaisuudet voivat myös tuottaa saman animaation tuloksen kuin edellisessä esimerkissä:

Esimerkki

div {
  animation: example 5s linear 2s infinite alternate;
}

Kokeile itse

CSS-animaation ominaisuudet

Seuraavassa taulukossa luetellaan @keyframes-säännöt ja kaikki CSS-animaation ominaisuudet:

Ominaisuus Kuvaus
@keyframes Määritellään animaation tila.
animation Asetetaan kaikki animaation ominaisuudet lyhennetyllä ominaisuudella.
animation-delay Määritellään, kuinka kauan animaatio viivästyy ennen alkua.
animation-direction Määritellään, meneekö animaatio eteenpäin, taaksepäin vai vaihtelee.
animation-duration Määritellään, kuinka kauan kestää, kun animaatio suorittaa yhden kerran.
animation-fill-mode Määritellään elementin tyyli, kun animaatiota ei toisteta (alkuun, loppuun tai molempiin).
animation-iteration-count Määritellään, kuinka monta kertaa animaatio tulee näytettäväksi.
animation-name Määritellään @keyframes-animaation nimi.
animation-play-state Määrittää, onko animaatio ajettava vai pysäytettävä.
animation-timing-function Määrittää animaation nopeuskaari.