Kursinhalt
Fortgeschrittene CSS-Techniken
Fortgeschrittene CSS-Techniken
Herausforderung: Animation Hinzufügen
Aufgabe
Verbessern Sie die visuelle Attraktivität des Autorisierungsformulars, indem Sie dem "Log in"-Button eine Animation hinzufügen. Befolgen Sie diese Schritte:
Geben Sie den korrekten Wert für die Eigenschaft
animation-name
an, indem Sie die voreingestellten Zustandsänderungen verwenden, die in der@keyframes
-Regel mit dem NamencolorChange
definiert sind.Setzen Sie die Zeitfunktion auf
linear
, um eine gleichmäßige Geschwindigkeit während der gesamten Animation sicherzustellen.Definieren Sie eine Dauer, damit die Animation
6000ms
dauert.Konfigurieren Sie die Animation so, dass sie
infinite
oft wiederholt wird, um einen kontinuierlichen Effekt zu erzielen.
index.html
index.css
Weisen Sie den Namen der
@keyframes
-Regel als Wert für die Eigenschaftanimation-name
zu.Geben Sie
linear
als Wert für die Eigenschaftanimation-timing-function
an, um eine gleichmäßige Geschwindigkeit zu gewährleisten.Setzen Sie die Eigenschaft
animation-duration
auf6000ms
, um die Dauer der Animation festzulegen.Verwenden Sie
infinite
als Wert für die Eigenschaftanimation-iteration-count
, um die Animation unendlich oft zu wiederholen.
index.html
index.css
Danke für Ihr Feedback!