<span>Свойства animation-direction</span>
<p>Свойство "normal"</p>
<p>начинается с 0%, заканчивается на 100%, и снова начинается с 0%</p>
<div class="normal"></div>
<p>Свойство "reverse"</p>
<p>начинается с 100%, заканчивается на 0%, и снова начинается с 100%</p>
<div class="reverse"></div>
<p>Свойство "alternate"</p>
<p>начинается с 0%, идёт до 100%, возвращается на 0%</p>
<div class="alternate"></div>
<p>Свойство "alternate-reverse"</p>
<p>начинается со 100%, идёт до 0%, возвращается на 100%</p>
<div class="alternate-reverse"></div>
p, span {
  font-family: Roboto, sans-serif;
  color: gray;
}
span {
  font-weight:bold;
}
div {
  width:50px;
  height:50px;
  border-radius:100%;
  position:relative;
}
.normal {
  background: blue;
  animation: swipe 1s infinite normal;
  -wekit-animation: swipe 1s infinite normal;
  -moz-animation: swipe 1s infinite normal;
  -o-animation: swipe 1s infinite normal;
  -ms-animation: swipe 1s infinite normal;
}
.reverse {
  background: red;
  animation: swipe 1s infinite reverse;
  -wekit-animation: swipe 1s infinite reverse;
  -moz-animation: swipe 1s infinite reverse;
  -o-animation: swipe 1s infinite reverse;
  -ms-animation: swipe 1s infinite reverse;
}
.alternate {
  background: yellow;
  animation: swipe 1s infinite alternate;
  -wekit-animation: swipe 1s infinite alternate;
  -moz-animation: swipe 1s infinite alternate;
  -o-animation: swipe 1s infinite alternate;
  -ms-animation: swipe 1s infinite alternate;
}
.alternate-reverse {
  background: purple;
  animation: swipe 1s infinite alternate-reverse;
  -wekit-animation: swipe 1s infinite alternate-reverse;
  -moz-animation: swipe 1s infinite alternate-reverse;
  -o-animation: swipe 1s infinite alternate-reverse;
  -ms-animation: swipe 1s infinite alternate-reverse;
}
@keyframes swipe {
  0% {left:0px;}
  100% {left:250px;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.