Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
Blinking with CSS keyframe animation causes high CPU usage in Chrome Mac.
    
    <br><br>
Cursor:
  <div class="cursor blinking"></div>
    
    <br><br>
<div>
        <label><input type="radio" name="type" value="css" checked> CSS keyframe animation</label><br>
    <label><input type="radio" name="type" value="js"> Javascript Interval</label> <br>
</div>  
<pre>
  <code> 
.blinking { animation: 1s blink step-end infinite; }
@keyframes "blink" { 
  from, to { visibility:hidden; } 
  50% { visibility:visible; } } 
   </code>
</pre>
</body>
</html>
 
.blinking { animation: 1s blink step-end infinite; }
@keyframes "blink" { 
  from, to { visibility:hidden; } 
  50% { visibility:visible; } } 
@-webkit-keyframes "blink" { 
  from, to { visibility:hidden; } 
  50% { visibility:visible; } } 
/* just styling */
.cursor { width:3px; height:24px; background:red; display:inline-block; position:relative; top:4px; }
* { margin:0; padding:0; }
body { font-size:20px; padding:20px;  line-height:160%; }
 
window.addEventListener('change', function (e) {
    if (e.target.value == 'js') {
        stopBlinkingCSS();
        startBlinkingJS();
    } else {
        stopBlinkingJS();
        startBlinkingCSS();
    }
}, true);
var cursor = document.querySelector('.cursor');
var blinkInterval;
function startBlinkingJS() {
  clearInterval(blinkInterval);
  var flag = true;
  showCursor();
  blinkInterval = setInterval(tick, 500);
  function tick() {
      flag = !flag;
      flag ? showCursor() : hideCursor();
  }
}
function stopBlinkingJS() {
  clearInterval(blinkInterval);
  hideCursor();
}
function startBlinkingCSS() {
  cursor.classList.add('blinking');
}
function stopBlinkingCSS() {
  cursor.classList.remove('blinking');
}
// helpers
function showCursor() {
    cursor.style.visibility = 'visible';
}
function hideCursor() {
    cursor.style.visibility = 'hidden';
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
galambalazspro
0viewers