CODEWITHSUNDEEP
csshovercss-animations
Desper
Desper

Reputation: 91

How to stop the currently running animation and change styles when hovered

So I have this simple label with a contact number which has a blinking animation going on. (code below) This is a simple color transition.

Also I need to pause the animation (done) and apply the default color to the text. When hovered, the animation obviously pause at a random color but doesn't change to the color I wanted. 

.contact .message {
  color: inherit;
  font-size: inherit;
  display: inline;
  animation: blink 2s infinite;
}

.contact .message:hover {
  color: #151111;
  /* This doesn't get applied */
  animation-play-state: paused;
}


/* Blinking animation */

@keyframes blink {
  0% {
    color: #0590b2;
  }
  50% {
    color: #151111;
  }
  100% {
    color: #0590b2;
  }
}
<div class="contact">
  <a href="tel:1234">
    <span class="message">Contact us: <strong>+1234</strong></span>
  </a>
</div>

What am I doing wrong?

Please give me some insight.

Here is the pen

Upvotes: 0

Views: 145

Answers (2)

Temani Afif
Temani Afif

Reputation: 272648

Here is another trick in case you need better support than CSS variables. Simply define the animation on the parent and change the color of the child:

.contact a {
  animation: blink 1s infinite alternate;
}

.contact .message:hover {
  color:red;
}

/* Blinking animation */
@keyframes blink {
  0% {
    color: #0590b2;
  }
  100% {
    color: #151111;
  }
}
<div class="contact" >
    <a href="tel:1234">
        <span class="message">Contact us: <strong>+1234</strong></span>
    </a>
</div>

Upvotes: 1

doğukan
doğukan

Reputation: 27381

I used CSS Variables.

var(--value, fallback);

fallback will be valid because "value" is not initially defined. When hover is done, fallback is invalid because "value" is defined.

.contact .message {
  color: var(--color, inherit);
  font-size: inherit;
  display: inline;
  animation: blink 2s infinite;
}

.contact .message:hover {
  --color: red;
  animation-play-state: paused;
}

/* Blinking animation */
@keyframes blink {
  0% {
    color: var(--color, #0590b2);
  }
  50% {
    color: var(--color, #151111);
  }
  100% {
    color: var(--color, #0590b2);
  }
}
<div class="contact" >
    <a href="tel:1234">
        <span class="message">Contact us: <strong>+1234</strong></span>
    </a>
</div>

Upvotes: 1

Related Questions