CSS3 animation error - css

Question

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 1s;
}
#-webkit-keyframes {
0% {background-color:#4CAF50;}
25% {background-color: red;}
50% {background-color: yellow;}
75% {background-color: blue;}
100% {background-color: orange;}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>
I have started learning css3 animations. All the animations which i wanted to do seem to run fine except for the color change which i have put in 'keyframes'. The website from which I was learning animations showed the exact same way but it doesn't seem to work on my project. Any help would be highly appreciated. Thanks :-)

Answer 1

You have to give the animation a name..and then apply that animation as a property...
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button {
animation: color-change 12s ease infinite;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
animation: color-change 12s ease infinite;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 1s;
}
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>