<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

<p>Цей приклад показує як працює властивість <code>animation</code>. Змінюйте значення для під-властивостей нижче, щоб змінити відображення анімації.</p>

<hr>

<strong>animation: </strong>

animation_name 

<input type="number" class="input" min="0" id="dur" value="1">s 

<select class="input" id="type">
  <option value="linear" name="value2" selected>linear</option>
  <option value="ease" name="value2">ease</option>
  <option value="ease-in" name="value2">ease-in</option>
  <option value="ease-out" name="value2">ease-out</option>
  <option value="ease-in-out" name="value2">ease-in-out</option>
  <option value="step-start" name="value2">step-start</option>
  <option value="step-end" name="value2">step-end</option>
</select>

<select class="input" id="count">
  <option value="infinite" name="value2" selected>infinite</option>
  <option value="1s" name="value2">1s</option>
  <option value="5s" name="value2">5s</option>
</select> 
<strong>;</strong><br><br>

<hr>

<div class="box">
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: 'Fira Sans', sans-serif;
}

.wm {
  min-height: 100px;
}

.box span {
  margin-top: 0;
  display: block;
  animation: animation_name 1s linear infinite;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
}

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

hr {
  margin-bottom: 16px;
}

$('.input').on('change', function() {
  
  var dur = $('#dur').val();
  var type = $('#type').find(":selected").text();
  var count = $('#count').find(":selected").text();
  
  $('.box span').css( 'animation', 'animation_name ' + dur + 's ' + type + ' ' + count );
  
});