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

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

<p><code>@keyframes left {
  0% { left: 0; }
  100% { left: -100%; }
}</code></p>

<p><code>@keyframes right {
  0% { left: 0; }
  100% { left: 100%; }
}</code></p>

<hr>
  
<div class="inputs">
  
  <input id="left" checked name="keyframe" type="radio"/>
  <label for="left">left</label>
  <message for="left">Задіяна перша анімація.</message>
  
  <input id="right" name="keyframe" type="radio"/>
  <label for="right">right</label>
  <message for="right">Задіяна друга анімація.</message>
  
</div>

<div class="wm">
  <p id="message">Задіяна перша анімація.</p>
</div>

<hr>

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

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

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

message {
  display: none;
}

.wm {
  min-height: 100px;
}

.wrapper {
  background-color: #dcdcdc;
}

.box {
	width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation-name: left;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  font-weight: 700;
}

span {
  float: left;
  width: 50%;
}

@keyframes left {
  0% { left: 0; }
  100% { left: -100%; }
}

@keyframes right {
  0% { left: 0; }
  100% { left: 100%; }
}

hr {
  margin-bottom: 16px;
}

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

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