How can I call CSS keyframe using Javascript? without jQuery

Question

I have this code that blinks the text.

div#b {
  -webkit-animation: blink 1s linear infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0.0
  }
  ;
  100% {
    opacity: 1.0
  }
  ;
}

<div id="b">Blinking</div>

I also have a table

 <tr>
  <th id="1">Mon</th>
  <th id="2">Tue</th>
  <th id="3">Wed</th>
  <th id="4">Thu</th>
  <th id="5">Fri</th>
</tr>

Basically, I want to make Tuesday blink 5 minutes before it is Tuesday etc. on all the days of the week. So, I want to implement the @keyframes blink I made in the above CSS to the each HTML element with different ids.

How can I do this? without using jquery. I haven't learned that. Please help. Thanks

You should consider learning some jQuery its not very difficult and sounds like it would help you solve some of the issues you are having. — jock.perkins
– jock.perkins, Commented May 17, 2017 at 7:34
I would recommend creating another CSS class that you will add / remove to show the animation — nick zoum
– nick zoum, Commented May 17, 2017 at 7:36
Do you want to blink the li element in which circumstances? Do you mean blinking the element The five minutes before the 12:00 pm on Mondays? — ElChiniNet
– ElChiniNet, Commented May 17, 2017 at 8:26

Icewine · Accepted Answer · 2017-05-17 08:04:40Z

1

How about:

var blinking = document.getElementById("b");
b.className = "blinking";


function RemoveBlink() {
  var blinking = document.getElementById("b");
  b.className = "";
}

div#b {
  
}

.blinking {
  -webkit-animation: blink 1s linear infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0.0
  }
  ;
  100% {
    opacity: 1.0
  }
  ;
}

<div id="b">Blinking</div>

<button onclick="RemoveBlink()">REMOVE BLINK</button>

answered May 17, 2017 at 8:04

Icewine

1,8511 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I call CSS keyframe using Javascript? without jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related