① Введение в CSS3-анимацию

CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.

Содержание:

1. Введение в CSS3-анимацию

2. Ключевые кадры

3. Временная функция для ключевых кадров

4. Название анимации: свойство animation-name

5. Продолжительность анимации: свойство animation-duration

6. Временная функция: свойство animation-timing-function

7. Повтор анимации: свойство animation-iteration-count

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

9. Проигрывание анимации: свойство animation-play-state

10. Задержка анимации: свойство animation-delay

11. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode

12. Краткая запись анимации: свойство animation и Множественные анимации

CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

HTML

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

*{box-sizing:border-box}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
@keyframes loader {
  0% {transform:rotate(-45deg)}
  50%{transform:rotate(-135deg)}
  100%{transform:rotate(-225deg)}}
@keyframes span-1 {
  0% {transform:translate(0);}
  50%{transform:translate(-50px, 0);border-color:#EE4D68}
  100%{transform:translate(0);}}
@keyframes span-2 {
  0%{transform:translate(0);}
  50%{transform:translate(50px, 0);border-color:#875678}
  100%{transform:translate(0);}}
@keyframes span-3 {
  0%{transform:translate(0);}
  50%{transform:translate(0, -50px);border-color:#FF9900}
  100%{transform:translate(0);}}
@keyframes span-4 {
  0%{transform:translate(0);}
  50%{transform:translate(0, 50px);border-color:#00E4F6}
  100%{transform:translate(0);}}
.loader {
  width: 50px;
  height: 50px;
  position: relative;
  animation: loader 2s infinite ease-in-out;
}
.loader span {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  border: 4px solid #0B1B48;
}
.loader span:nth-child(1) {
  animation: span-1 2s ease-in-out infinite;
}
.loader span:nth-child(2) {
  animation: span-2 2s ease-in-out infinite;
}
.loader span:nth-child(3) {
  animation: span-3 2s ease-in-out infinite;
}
.loader span:nth-child(4) {
  animation: span-4 2s ease-in-out infinite;
}

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