Summary  
This chapter covers how to configure the timing aspects of animations using CSS properties—animation-duration, animation-delay, and animation-timing-function—to control how long an animation runs, when it starts, and how it accelerates or decelerates.

General domain of usage  
Front-end web development

Tarkastellaan kaikkia mahdollisia tapoja työskennellä animaation ajan kanssa.

### animation-duration-ominaisuus
`animation-duration` määrittää ajan, joka tarvitaan animaation yhden syklin suorittamiseen (muutos alkuperäisestä lopulliseen tilaan), mitattuna sekunneissa (`s`) tai millisekunneissa (`ms`).
```css
animation-duration: 3s | 3000ms
```

Suoritetaan seuraava esimerkki ja viedään hiiri laatikon päälle:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4yczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjVzPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgxKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAxczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDIpIHsKICBhbmltYXRpb24tZHVyYXRpb246IDJzOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMykgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogNXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-timing-function -ominaisuus 
`animation-timing-function` määrittää, miten animaatio etenee ajan kuluessa, ohjaten animaation kiihtyvyyttä ja hidastuvuutta. `animation-timing-function` voi saada samat arvot kuin `transition-timing-function` -ominaisuus. Useita ennalta määriteltyjä ajoitustoimintoja on saatavilla, kuten `linear`, `ease` ja `ease-in-out`, tai voimme määrittää oman cubic bezier -käyrän käyttämällä `cubic-bezier()` -funktiota.
```css
animation-timing-function: time_function
```
Sovelletaan erilaisia time_function-arvoja esimerkin laatikoihin:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ZWFzZTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPmVhc2UtaW48L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5lYXNlLW91dDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1vdXQ7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-delay-ominaisuus 
`animation-delay` määrittää ajan, joka kuluu ennen animaation alkamista. Arvo voidaan ilmoittaa sekunteina (`s`) tai millisekunteina (`ms`).
```css
animation-delay: 0.1s | 100ms
```
Sovelletaan eri viiveitä laatikoihin esimerkissä:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MTAwbXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zMDBtczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjEwMDBtczwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tZGVsYXk6IDEwMG1zOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi1kZWxheTogMzAwbXM7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLWRlbGF5OiAxMDAwbXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

Voimme määrittää animaation aloitusviiveen, keston sekä etenemisen ajan kuluessa.

Kehitä tyylittelytaitojasi hallitsemalla edistyneet CSS-tekniikat modernia web-suunnittelua varten. Sijoita ja hallitse elementtejä tarkasti käyttämällä kehittyneitä asemointistrategioita. Luo sulavia siirtymiä ja mukaansatempaavia animaatioita parantaaksesi käyttökokemusta. Muunna ja manipuloi elementtejä dynaamisten visuaalisten tehosteiden saavuttamiseksi. Rakenna responsiivisia suunnitelmia, jotka mukautuvat eri laitteille, ja tehosta työnkulkuasi CSS-esikäsittelijöillä, kuten Sassilla.

Tutustu, mitä oppijat voivat odottaa tältä edistyneen HTML- ja CSS-tyylittelyn kurssilta. Mitä esitietoja tarvitaan ennen kurssin aloittamista? Mitä aiheita kurssilla käsitellään?

Sijoita ja hallitse elementtejä verkkosivuilla. Tutustu erilaisiin sijoitteluominaisuuksiin, opi käyttämään pinontajärjestystä päällekkäisten elementtien näkyvyyden hallintaan sekä käsittele sisällön ylivuotoa.

Tutki siirtymien tehokkuutta ja opi parantamaan käyttökokemusta. Selvitä, kuinka ominaisuuksia voidaan elävöittää sulavasti ja asteittain, luoden saumattomia tilasiirtymiä.

Opi animaatio-ominaisuudesta ja sen käytöstä dynaamisten ja kiinnostavien suunnittelujen luomisessa. Tutustu monimutkaisten animaatioiden luomiseen avainruutujen avulla sekä animaation hallintaan.

Tutustu transformaatio-ominaisuuteen, jonka avulla voidaan muokata elementtien ulkoasua ja sijaintia verkkosivulla. Opiskele, miten elementtejä skaalataan, kierrätetään, vinotaan ja siirretään kahdessa ja kolmessa ulottuvuudessa. Yhdistä useita transformaatioita monimutkaisempien efektien luomiseksi.

Mukautuvan ja responsiivisen suunnittelun periaatteet ja tekniikat tähtäävät siihen, että verkkosivustot ja sovellukset ovat saavutettavia ja visuaalisesti houkuttelevia eri laitteilla, näytön ko'oilla ja suuntauksilla.

Opi CSS-esiprosessoreista ja siitä, miten ne auttavat kirjoittamaan tehokkaampaa ja helpommin ylläpidettävää koodia. Ymmärrä, kuinka esiprosessoreita käytetään työnkulun yksinkertaistamiseen ja siistimmän CSS-koodin tuottamiseen.

Animaation Keston ja Ajoituksen Määrittely

animation-duration-ominaisuus

animation-timing-function -ominaisuus

animation-delay-ominaisuus