How do I add animation to a :hover element?

Question

I need to have a :hover element that, when being hovered over, will cause the background color to change between five colors. This the code I'm working with right now.


      
.background_changer :hover {
}

I know it's not much to go off of, but help with what I should tweak would be great.

user_13669087 · Answer

One method is to use a CSS animation/keyframes. In this case the keyframes are named Change_Colour. This animation is then toggled under the class' hover state. Press the Run code snippet button below to see the results:

.background_changer{
  height: 5rem;
  width: 5rem;
  background-color: red;
}

.background_changer:hover{
  animation: Change_Colour 1s infinite;
}

@keyframes Change_Colour {
  0% {background-color: red;}
  20% {background-color: orange;}
  40% {background-color: yellow;}
  60% {background-color: green;}
  80% {background-color: blue;}
  100% {background-color: red;} 
}

user_14938169 · Answer

You need to add animation property to .background_changer:hover selector like this:-

Below code changes the background color in 5 different colors but you can also change it to more or less colors by simply distributing the percentages equally inside the @keyframes.

.background_changer{
  height:100px;
  width:100px;
  background-color: black;
  cursor:pointer;
}

.background_changer:hover{
  animation: glow linear 2s infinite;
}

@-webkit-keyframes glow { 
    0% { background-color:red; }
    25% { background-color:orange; }
    50% { background-color:green; }
    75% { background-color:blue; }
    100% { background-color:indigo; } 
}

@keyframes glow { 
    0% { background-color:red; }
    25% { background-color:orange; }
    50% { background-color:green; }
    75% { background-color:blue; }
    100% { background-color:indigo; } 
}

user_12882691 · Answer

what your looking for is @keyframes the code below should accomplish what you want.

.bgchange {
  width: 300px;
  height: 300px;
  background: red;
}

.bgchange:hover {
  animation: anim 5s infinite;
}


@keyframes anim {
 
 0% {
 background: red;}
 
 20% {
 background: blue;}
 
 40% {
 background: green;}
 
 60% {
 background: orange;}
 
 80% {
  background: yellow;}
  
  100%{
  background: pink;}
 }
 
 
 }

user_8620333 · Answer

Here is an idea without keyframes:

.background_changer{
  height: 5rem;
  width: 5rem;
  background:
   linear-gradient(90deg,
     red    0 20%,
     blue   0 40%,
     green  0 60%, 
     yellow 0 80%,
     purple 0) 
   left/500% 100%;
  transition:1s steps(4); /* 4 inside steps not 5 */
}

.background_changer:hover{
  background-position:right;
}

How do I add animation to a :hover element?

4 Answers