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

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

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

.box {
	width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: anim 5s linear infinite;
  font-weight: 700;
}

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

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