Haaste: Toteuta CSS-animaatio
Tehtävä
Paranna kirjautumislomakkeen visuaalista ilmettä lisäämällä animaatio "Log in" -painikkeeseen. Toimi seuraavasti:
- Määritä oikea arvo
animation-name
-ominaisuudelle käyttämällä@keyframes
-säännössä määriteltyä tilamuutosta nimelläcolorChange
. - Aseta ajoitusfunktioksi
linear
, jotta animaation nopeus pysyy tasaisena koko ajan. - Määritä animaation kestoksi
6000ms
. - Aseta animaatio toistumaan
infinite
-arvolla, jotta vaikutelma on jatkuva.
index.html
index.css
- Määritä
@keyframes
-säännön nimianimation-name
-ominaisuuden arvoksi. - Aseta
linear
arvoksianimation-timing-function
-ominaisuudelle tasaisen nopeuden varmistamiseksi. - Määritä
animation-duration
-ominaisuudeksi6000ms
animaation keston määrittämiseksi. - Käytä
infinite
arvoaanimation-iteration-count
-ominaisuudessa animaation toistamiseksi loputtomasti.
index.html
index.css
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 4. Luku 6
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04
Haaste: Toteuta CSS-animaatio
Pyyhkäise näyttääksesi valikon
Tehtävä
Paranna kirjautumislomakkeen visuaalista ilmettä lisäämällä animaatio "Log in" -painikkeeseen. Toimi seuraavasti:
- Määritä oikea arvo
animation-name
-ominaisuudelle käyttämällä@keyframes
-säännössä määriteltyä tilamuutosta nimelläcolorChange
. - Aseta ajoitusfunktioksi
linear
, jotta animaation nopeus pysyy tasaisena koko ajan. - Määritä animaation kestoksi
6000ms
. - Aseta animaatio toistumaan
infinite
-arvolla, jotta vaikutelma on jatkuva.
index.html
index.css
- Määritä
@keyframes
-säännön nimianimation-name
-ominaisuuden arvoksi. - Aseta
linear
arvoksianimation-timing-function
-ominaisuudelle tasaisen nopeuden varmistamiseksi. - Määritä
animation-duration
-ominaisuudeksi6000ms
animaation keston määrittämiseksi. - Käytä
infinite
arvoaanimation-iteration-count
-ominaisuudessa animaation toistamiseksi loputtomasti.
index.html
index.css
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 4. Luku 6