Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Toteuta CSS-animaatio | Edistyneet CSS-animaatiot
Edistyneet CSS-tekniikat

bookHaaste: Toteuta CSS-animaatio

Tehtävä

Paranna kirjautumislomakkeen visuaalista ilmettä lisäämällä animaatio "Log in" -painikkeeseen. Toimi seuraavasti:

  1. Määritä oikea arvo animation-name -ominaisuudelle käyttämällä @keyframes-säännössä määriteltyä tilamuutosta nimellä colorChange.
  2. Aseta ajoitusfunktioksi linear, jotta animaation nopeus pysyy tasaisena koko ajan.
  3. Määritä animaation kestoksi 6000ms.
  4. Aseta animaatio toistumaan infinite-arvolla, jotta vaikutelma on jatkuva.
index.html

index.html

index.css

index.css

copy
  1. Määritä @keyframes-säännön nimi animation-name-ominaisuuden arvoksi.
  2. Aseta linear arvoksi animation-timing-function-ominaisuudelle tasaisen nopeuden varmistamiseksi.
  3. Määritä animation-duration-ominaisuudeksi 6000ms animaation keston määrittämiseksi.
  4. Käytä infinite arvoa animation-iteration-count-ominaisuudessa animaation toistamiseksi loputtomasti.
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookHaaste: Toteuta CSS-animaatio

Pyyhkäise näyttääksesi valikon

Tehtävä

Paranna kirjautumislomakkeen visuaalista ilmettä lisäämällä animaatio "Log in" -painikkeeseen. Toimi seuraavasti:

  1. Määritä oikea arvo animation-name -ominaisuudelle käyttämällä @keyframes-säännössä määriteltyä tilamuutosta nimellä colorChange.
  2. Aseta ajoitusfunktioksi linear, jotta animaation nopeus pysyy tasaisena koko ajan.
  3. Määritä animaation kestoksi 6000ms.
  4. Aseta animaatio toistumaan infinite-arvolla, jotta vaikutelma on jatkuva.
index.html

index.html

index.css

index.css

copy
  1. Määritä @keyframes-säännön nimi animation-name-ominaisuuden arvoksi.
  2. Aseta linear arvoksi animation-timing-function-ominaisuudelle tasaisen nopeuden varmistamiseksi.
  3. Määritä animation-duration-ominaisuudeksi 6000ms animaation keston määrittämiseksi.
  4. Käytä infinite arvoa animation-iteration-count-ominaisuudessa animaation toistamiseksi loputtomasti.
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 6
some-alt