CODEWITHSUNDEEP
htmlcssanimationhover
Ctrl-C
Ctrl-C

Reputation: 29

How do I add animation to a :hover element?

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.

<div class="background_changer">
      </div>
.background_changer :hover {
}

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

Upvotes: 2

Views: 204

Answers (4)

Temani Afif
Temani Afif

Reputation: 272590

Here is an idea without keyframes:

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

.background_changer:hover{
  background-position: right;
}
<div class="background_changer"></div>

Upvotes: 1

MichaelTr7
MichaelTr7

Reputation: 4757

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;} 
}
<div class="background_changer"></div>

Upvotes: 1

bobsfriend12
bobsfriend12

Reputation: 446

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;}
 }
 
 
 }
<div class="bgchange"></div>

Upvotes: 1

Roshan Kanwar
Roshan Kanwar

Reputation: 271

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; } 
}
<div class="background_changer">
</div>

Upvotes: 1

Related Questions