CODEWITHSUNDEEP
javascripthtmlcss
Leonard
Leonard

Reputation: 3218

How can I call CSS keyframe using Javascript? without jQuery

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

Upvotes: 0

Views: 3344

Answers (1)

Icewine
Icewine

Reputation: 1851

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>

Upvotes: 1

Related Questions