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

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

<div class="inputs">
  
  <input id="normal" checked name="animation-direction" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Анімація йде з самого початку, після завершення циклу повертається до вихідного стану.</message>
  
  <input id="reverse" name="animation-direction" type="radio"/>
  <label for="reverse">reverse</label>
  <message for="reverse">Анімація йде з кінця до початку, потім плавно повертається у вихідне положення.</message>
  
  <input id="alternate" name="animation-direction" type="radio"/>
  <label for="alternate">alternate</label>
  <message for="alternate">Анімація йде циклічно з початку до кінця, а потім з кінця до початку.</message>
  
  <input id="alternate-reverse" name="animation-direction" type="radio"/>
  <label for="alternate-reverse">alternate-reverse</label>
  <message for="alternate-reverse">Анімація йде циклічно з кінця до початку, а потім з початку до кінця.</message>
  
</div>

<div class="wm">
  <p id="message">Анімація йде з самого початку, після завершення циклу повертається до вихідного стану.</p>
</div>

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

.box span {
  margin-top: 0;
  display: block;
  animation-name: animation_name;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  animation-direction: normal;
}

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

message {
  display: none;
}

.wm {
  min-height: 100px;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('.box span').css('animation-direction', $(this).attr('id'));
  
});