Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Challenge: Implement CSS Animation | Advanced CSS Animations
Advanced CSS Techniques

book
Challenge: Implement CSS Animation

Task

Enhance the visual appeal of the authorization form by adding an animation to the "Log in" button. Follow these steps:

  1. Specify the correct value for the animation-name property, using the preset state changes defined in the @keyframes rule with the name colorChange.

  2. Set the time function to linear to ensure a consistent speed throughout the animation.

  3. Define a duration for the animation to last 6000ms.

  4. Configure the animation to repeat infinite times for a continuous effect.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<form class="form">
<label for="mail" class="label"> Email </label>
<input type="email" id="mail" class="input" />
<label for="password" class="label"> Password </label>
<input type="password" id="password" class="input" />
<button type="submit" class="button">Log in</button>
</form>
</div>
</body>
</html>

  1. Assign the name of the @keyframes rule as the value for the animation-name property.

  2. Specify linear as the value for the animation-timing-function property to ensure a consistent speed.

  3. Set the animation-duration property to 6000ms to determine the duration of the animation.

  4. Use infinite as the value for the animation-iteration-count property to repeat the animation indefinitely.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<form class="form">
<label for="mail" class="label"> Email </label>
<input type="email" id="mail" class="input" />
<label for="password" class="label"> Password </label>
<input type="password" id="password" class="input" />
<button type="submit" class="button">Log in</button>
</form>
</div>
</body>
</html>

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6

Fråga AI

expand
ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

We use cookies to make your experience better!
some-alt