Zekmos
1
Tell us what’s happening:
**Your code so far**
<style>
button {
@keyframes rainbow{
100% {background-color: #4791d0;}
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
</style>
<button>Register</button>
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
.
Challenge: Use CSS Animation to Change the Hover State of a Button
Link to the challenge:
Hi Zekmos,
the problem is the syntax. Try this:
@keyframes rainbow {
100% {
background-color: #4791d0;
}
}
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: rainbow; /* name of animation defined with @keyframes */
animation-duration: 500ms;
}
You can find more details and examples here
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Happy coding!
Zekmos
3
Thanks for your time…S olved
1 Like
system
Closed
4
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.