CSS-animaatiot

CSS-animaatiot

CSS voi toteuttaa HTML-elementtien animaationefektit 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

Animaation selaimen tuki

Taulukossa olevat luvut 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

Mitä CSS-animaatio on?

Animaatio saa elementin muuttumaan asteittain yhdestä tyystä toiseen.

Voit muuttaa vapaasti minkä tahansa määrän CSS-ominaisuuksia.

CSS-animaation käyttö vaatii, että sinun on ensin määritetty joitakin keskeisiä kehysviä.

Keskeiset kehysvät sisältävät elementin tyylit tietyn ajan kohdalla.

@keyframes-sääntö

Jos sinulla on @keyframes Säännössä määritetään CSS-tyylit, ja animaatio muuttuu asteittain nykyisestä tyylistä uuteen tyyliin tiettyyn aikaan.

Jotta animaatio toimisi, sen on sidottava johonkin elementtiin.

Esimerkki sitoo "example"-animoinnin div-elementtiin. Animaatio kestää 4 sekuntia ja muuttaa div-elementin taustaväriä punaisesta keltaiseksi:

Esimerkki

/* Animaatiokoodi */
@keyframes example {
  from {taustaväri: punainen;}
  to {taustaväri: keltainen;}
}
/* sovelletaan animaatioefekti tähän elementtiin */
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 ei määritetä ominaisuutta, animaatiota ei tapahdu, koska oletusarvo on 0s (0 sekuntia).

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

Voit myös käyttää prosenttiosuutta. Käyttämällä prosenttiosuutta voit lisätä tarpeen mukaan minkä tahansa määrän tyylejä.

Esimerkki muuttuu animaation valmistuttua 25%, 50% ja animaation valmistuttua 100% div-elementin taustavärin muuttuessa:

Esimerkki

/* Animaatiokoodi */
@keyframes example {
  0%   {taustaväri: punainen;}
  25%  {taustaväri: keltainen;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Käyttää animaatiota sisältävä elementti */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kokeile itse

Esimerkissä animaation suorittu 25%, 50% ja 100% kokonaisuudessaan vaihdetaan taustaväri ja <div>-elementin sijainti:

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ää animaatiota sisältävä 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, ikään kuin se olisi jo toistunut N sekuntia.

Esimerkissä animaatio alkaa toistua, ikään 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 animaation tulisi toistua

animation-iteration-count Atribuutti määrittää, kuinka monta kertaa animaation tulisi toistua.

Esimerkissä animaatio ajetaan 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", jotta 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 animaatiota vastakkaiseen tai vaihtelevaan suuntaan

animation-direction Atribuutti määrittää, onko animaatio toistettava 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

Tässä esimerkissä animaatio ajetaan 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", jotta animaatio ajetaan 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", jotta animaatio ajetaan 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ä nopeus, joka alkaa hitaasti, kiihtyy ja päättyy jälleen hitaasti (oletusarvo)
  • linear - Määritä alusta loppuun tasainen nopeus animaatiolle
  • ease-in - Määritä hitaasti alkava animaatio
  • ease-out - Määritä hitaasti päättävä animaatio
  • ease-in-out - Määritä alku- ja loppusäännöllisesti hitaampi animaatio
  • cubic-bezier(n,n,n,n) - Suorita kolmen Bezier-funktion määrittämät omat arvosi

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ömalli

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

Kun animaatiota ei toisteta (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 sovellaa minkäänlaista tyylejä elementtiin ennen suorittamista tai sen jälkeen.
  • forwards - Elementti säilyttää viimeisen avainruudusta asetetut tyylivärit (riippuen animation-directionista ja animation-iteration-countista).
  • backwards - Elementti saa ensimmäisestä avainruudusta asetetut tyylivärit (riippuen animation-directionista) ja säilyttää arvon animaation viivästymisen aikana.
  • both - Animaatio seuraa sekä eteen- että taaksepäin sääntöjä, laajentaen animaation ominaisuuksia 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 asettaman 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 lyhennetty ominaisuus

Seuraavassa esimerkissä käytetään kuutta animaatioparantetta:

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äytä lyhennettyä animation Ominaisuudet voivat myös toteuttaa saman animaation efektin kuin edellisessä esimerkissä:

Esimerkki

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

Kokeile itse

CSS-animaatioparantteet

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

Ominaisuus Kuvaus
@keyframes Määrittää animaatiomallin.
animation Asettaa kaikkien animaatioparantteiden lyhennetyn attribuutin.
animation-delay Määrittää, kuinka kauan animaatio viivästyy ennen kuin se alkaa.
animation-direction Määrittää, onko animaatio eteenpäin, taaksepäin vai vaihtelevasti toistettava.
animation-duration Määrittää, kuinka kauan kestää, kun animaatio suorittaa yhden kerran.
animation-fill-mode Määrittää elementin tyyli, kun animaatiota ei toisteta (alkuun, loppuun tai molempiin).
animation-iteration-count Määrittää animaation tulisi toistaa kertaa.
animation-name Määrittää @keyframes-animaation nimi.
animation-play-state Määrittää, onko animaatio käynnissä vai pysäytetty.
animation-timing-function Määrittää animaation nopeuskaaren.