<p>Спробуйте змінити значення для <code>animation-duration</code> (максимально 60, це для прикладу):</p>

<input type="number" value="2" max="60" id="field">

<button id="btn">Запустити анімацію</button>

<div id="block">
  <span id="time">00s</span>
</div>
body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}

#field,
#btn{
  padding: 6px 12px;
  font-size: 19px;
  display: inline-block;
}

#btn {
  cursor: pointer;
  width: 250px;
  text-align: center;
}

@keyframes animate {
  
  from { 
    margin-top: 50px; 
  }
  
  to   { 
    margin-top: 100px; 
  }
  
}

#block {
  background-color: red;
  padding: 36px 26px;
  width: 75px;
  margin-top: 50px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  animation: animate 2s ease-in 0s 2 alternate paused;
}
var block = document.getElementById('block');
var field = document.getElementById('field');
var btn = document.getElementById('btn');
var time = document.getElementById('time');

field.onchange = function() {
  block.style.animationDuration = field.value + 's';
}

btn.onclick = function() {
  
  if ( block.style.animationPlayState != 'running' ) {
    
    var newTime = field.value;
    startTimer(newTime);
    
    block.style.animationPlayState = 'running';
    btn.innerHTML = 'Зупинити анімацію';
    
  } else {
    
    block.style.animationPlayState = 'paused';
    btn.innerHTML = 'Запустити анімацію';
    startTimer(0);
    
  }
  
}

function startTimer(duration) {
    var timer = duration, seconds;
    var showTime = setInterval(function () {
        seconds = parseInt(timer % 60, 10);

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

        time.innerText = seconds + 's';

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.