⑧ Направление анимации: свойство animation-direction

Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Введение в CSS3-анимацию
• ② Ключевые кадры
• ③ Временная функция для ключевых кадров
• ④ Название анимации: свойство animation-name
• ⑤ Продолжительность анимации: свойство animation-duration
• ⑥ Временная функция: свойство animation-timing-function
• ⑦ Повтор анимации: свойство animation-iteration-count

Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out.

Свойство не наследуется.

animation-direction

Значения:

• normal - Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию.
• reverse - Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены.
• alternate - Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении.
• alternate-reverse - Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении.
• initial - Устанавливает значение свойства в значение по умолчанию.
• inherit - Наследует значение свойства от родительского элемента.

Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 1.

Синтаксис

CSS

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
animation-direction: initial;
animation-direction: inherit;

HTML

<div class="container">
  <kbd>animation-direction: alternate;</kbd>
<ul class="alternate">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  <kbd>animation-direction: alternate-reverse;</kbd>
<ul class="alternate-reverse">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  <kbd>animation-direction: normal;</kbd>
<ul class="normal">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  <kbd>animation-direction: reverse;</kbd>
<ul class="reverse">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</div>

CSS

body {
  margin: 0;
  text-align: center;
  background: url(https://html5book.ru/wp-content/uploads/2015/05/background1.png);
}
.container {
  width: 660px;
  margin: 50px auto;
}
ul {
  padding: 0;
  list-style: none;
  margin-bottom: 40px;
}
li {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px; 
  box-shadow: 1px 1px 2px rgba(0,0,0,.3);
}
li:nth-child(1) {background:#8A6C5E}
li:nth-child(2) {background:#BBDADE}
li:nth-child(3) {background:#F6D5A1}
li:nth-child(4) {background:#FAC0B0}
li:nth-child(5) {background:#FF615B}
.alternate li {
  -webkit-animation: shake .7s linear alternate infinite;
  animation: shake .7s linear alternate infinite;
}
.alternate-reverse li {
  -webkit-animation: shake 0.7s linear alternate-reverse infinite;
  animation: shake 0.7s linear alternate-reverse infinite;
}
.normal li {
  -webkit-animation: shake 0.7s linear normal infinite;
  animation: shake 0.7s linear normal infinite;
}
.reverse li {
  -webkit-animation: shake 0.7s linear reverse infinite;
  animation: shake 0.7s linear reverse infinite;
}
@-webkit-keyframes shake {
  100% {
    -webkit-transform: translateX(-30px);    
  }
}
@keyframes shake {
  100% {
    transform: translateX(-30px);    
  }
}

Продолжение в следующей статье!