<div id="time">00s</div>

<p id="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	body {
  line-height: 1.45;
  font-family: Ubuntu, sans-serif;
  font-size: 17px;
  color: #252525;
}

p {
  padding: 16px;
  
  /* ALTERNATIVE */
  /*
  animation-name: jump;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none; 
  */
  
  animation: jump 6s linear 2.5s infinite alternate none paused;
}

@keyframes jump {
  from {
    margin-top: 0;
    background-color: #666;
    color: #f1f1f1;
  }
  to {
    margin-top: 25%;
    background-color: #808080;
    color: #252525;
  }
}

#time {
	font-size: 22px;
	font-family: monospace;
	padding: 16px;
}
function startTimer() {
  var timer = 6, seconds;
  var showTime = setInterval(function () {
      seconds = parseInt(timer % 60, 10);

      seconds = seconds < 10 ? "0" + seconds : seconds;

      document.getElementById('time').innerText = seconds + 's';

      if (--timer < 0) {
        clearInterval(showTime);
      }
  }, 1000);
}

window.onload = function() {
	startTimer();
	document.getElementById('block').style.animationPlayState = 'running';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.