[Из песочницы] Простая анимация загрузки в Material Design (CSS3)

Автор: iskylake
Источник: https://habrahabr.ru/post/340090/
Доброго времени суток, уважаемые читатели Хабрахабра! Меня зовут Александр Шевченко, я начинающий веб-разработчик. Перейдём к делу. Анимации в CSS3 — давно не новинка. Однако, иногда можно сделать что-то простое эффектным. Сегодня мы по этому принципу создадим небольшую анимацию загрузки.

Шаг 1. Плавное появление самого экрана загрузки

Да-да. Перед тем, как приступить к основной части, мы сделаем анимацию появления самого экрана загрузки.

  body {
      -webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
      -moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
      animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
      opacity: 0;
      background-color: transparent;
  }
/* WebKit (Safari и Chrome) */
 @-webkit-keyframes body-opacity-change {
      from { opacity: 0; background-color: transparent; }
      to { opacity: 1; background-color: #1b1c2c; }
 }
/* Mozilla Firefox */
 @-moz-keyframes body-opacity-change {
      from { opacity: 0; background-color: transparent; }
      to { opacity: 1; background-color: #1b1c2c; }
}
/* Общий синтаксис */
 @keyframes body-opacity-change {
      from { opacity: 0; background-color: transparent; }
      to { opacity: 1; background-color: #1b1c2c; }
 }