Keyframe Animations Test

Trying to provoke the 100% CPU usage

HTML

<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>

CSS

.ball {
    width:100px;
    height:100px;
    border-radius:100px;
    background-color:darkred;
    position:absolute;
    top:100px;
    left:200px;
}

@-webkit-keyframes slide {
    0% { 
      opacity: 1;
      left:200px;
      display: block;
    }
    90% {
      opacity: 0.4;
      left: 100px;
      display: block;
    }
    100% {
      display: none;
      opacity: 0.4;
      left: 100px;
    }
}


.remove {
    animation: slide 1s linear;
    display: none;
    -webkit-animation: slide 1s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

JavaScript

document.getElementById('start').addEventListener('click', function(e) {
    document.getElementById('ball').classList.add('remove');
});

document.getElementById('reset').addEventListener('click', function(e) {
    document.getElementById('ball').classList.remove('remove');
});