CSS animation-duration — тривалість анімації

HTML

<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>

CSS

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;
}

JS

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);
}
//# sourceURL=pen.js

HTML

<div class="info">
	<p>За допомогою універсальної властивості <code>animation-duration</code> ми можемо встановити час одного циклу анімації.</p>
	<p>Нижче, показаний приклад такої анімації. Ми визначили один цикл на 4 секунди.</p>
</div>

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

<div class="wrapper">
	<span id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 15px;
	overflow: hidden;
	line-height: 1.45;
}

.info {
	padding: 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
  background-color: #dcdcdc;
}

#text {
  margin-top: 0;
  display: block;
  animation: anim 4s linear 0s infinite alternate none;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
}

@keyframes anim {
  0% { margin-top: 0; }
  50% { margin-top: 50px; }
  100% { margin-top: 0; }
}

JS

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

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

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

window.onload = function () {
  startTimer();
};
//# sourceURL=pen.js

HTML

<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>

CSS

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;
}

JS

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';
};
//# sourceURL=pen.js