I have a picture with a clear background that I want to add a CSS3 background animation to when the mouse hovers over it.
Here is the CSS code I am currently using:
@keyframes in
{
from {background-color: #fff;}
to {background-color: #900;}
}
@-webkit-keyframes in /*chrome-safari*/
{
from {background-color: #fff;}
to {background-color: #900;}
}
img {
width: 150px;
height: 150px;
border: 1px solid black;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
img:hover {
animation: in 0.5s;
-webkit-animation: in 0.5s;
cursor: pointer;
}
The animations are functioning, but there is an issue where once the animation reaches the end point (background-color: #900), it reverts back to the starting point (background-color: #fff).
Any suggestions on how to make the background color stay permanent after the animation?