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:
- Specify the correct value for the
animation-nameproperty, using the preset state changes defined in the@keyframesrule with the namecolorChange. - Set the time function to
linearto ensure a consistent speed throughout the animation. - Define a duration for the animation to last
6000ms. - Configure the animation to repeat
infinitetimes for a continuous effect.
index.html
index.css
<!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>
.button {
cursor: pointer;
color: #00ffca;
font-size: 24px;
font-weight: 500;
border: none;
border-radius: 5px;
background-color: #0a4d68;
padding: 10px 20px;
display: block;
margin: 0 auto;
/* --------------- Make changes below this line --------------- */
animation-name: ___;
___: linear;
___: ___;
___: ___;
/* --------------- Make changes above this line --------------- */
}
@keyframes colorChange {
0% {
background-color: #0a4d68;
}
25% {
background-color: #088395;
}
50% {
background-color: #05bfdb;
}
75% {
background-color: #088395;
}
100% {
background-color: #0a4d68;
}
}
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 6
