Доброго времени суток, уважаемые читатели Хабрахабра! Меня зовут Александр Шевченко, я начинающий веб-разработчик. Перейдём к делу. Анимации в 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; }
 }

Шаг 2. Основная часть экрана загрузки

Теперь приступаем к самому экрану загрузки. Давайте сделаем основными компонентами анимации четыре отпрыгивающих шара.

  div.circle {
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      background: #fff;
      width: 13px;
      height: 13px;
      display: inline-block;
      margin-top: 40%;
  }

Шаг 3. Применяем стили к шарам

Теперь начинается кульминация нашей небольшой работы. При помощи псевдоклассов :nth-child, :first-child и :last-child кастомизируем наши шары.
Внимание! При создании анимации к каждому шару применяйте разную длительность самой анимации дабы шары подпрыгивали в разное время с разной скоростью.

/* Первый шар */
 div.circle:first-child {
      -webkit-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      -moz-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      background-color: #4285f4;
      margin-right: 6px;
 }
/* Второй шар */
 div.circle:nth-child(2) {
      -webkit-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      -moz-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      background-color: #34a853;
      margin-right: 3px;
 }
/* Третий шар */
 div.circle:nth-child(3) {
      -webkit-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      -moz-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      background-color: #fbbc05;
      margin-left: 3px;
 }
/* Четвёртый шар */
 div.circle:last-child {
      -webkit-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      -moz-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
      background-color: #ea4335;
      margin-left: 6px;
  }

Шаг 4. Создаём ключевые кадры анимации

И таким образом, предпоследний шаг в нашем проекте — ключевые кадры анимации шаров.

/* WebKit (Safari и Chrome) */
 @-webkit-keyframes upload {
      from { -webkit-transform: translateY(35px); }
      to { -webkit-transform: translateY(-35px); }
 }
/* Mozilla Firefox */
 @-moz-keyframes upload {
      from { -moz-transform: translateY(35px); }
      to { -moz-transform: translateY(-35px); }
 }
/* Общий синтаксис */
 @keyframes upload {
      from { transform: translateY(35px); }
      to { transform: translateY(-35px); }
 }

Шаг 5. Объединяем код

Последний штрих, конечно, самый банальный, однако всё же без него никак.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="ansi" />
  <title>Экран загрузки</title>
  <style type="text/css">
/* Цвет фона */
  body.bg-color {
    background-color: transparent;
    margin: 0;
  }
/* Загрузка страницы */
  body.onload {
    -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;
  }
/* Шары */
  div.circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-top: 40%;
  }
/* 1-ый шар */
  div.circle:first-child {
    -webkit-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    -moz-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    background-color: #4285f4;
    margin-right: 6px;
  }
/* 2-ой шар */
  div.circle:nth-child(2) {
    -webkit-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    -moz-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    background-color: #34a853;
    margin-right: 3px;
  }
/* 3-ий шар */
  div.circle:nth-child(3) {
    -webkit-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    -moz-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    background-color: #fbbc05;
    margin-left: 3px;
  }
/* 4-ый шар */
  div.circle:last-child {
    -webkit-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    -moz-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
    background-color: #ea4335;
    margin-left: 6px;
  }
/*--- Кейфреймы анимаций ---*/
/*-- Загрузка страницы --*/
/* 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; }
  }
/*-- Анимация шаров --*/
/* WebKit (Safari и Chrome) */
  @-webkit-keyframes upload {
    from { -webkit-transform: translateY(35px); }
    to { -webkit-transform: translateY(-35px); }
  }
/* Mozilla Firefox */
  @-moz-keyframes upload {
    from { -moz-transform: translateY(35px); }
    to { -moz-transform: translateY(-35px); }
  }
/* Общий синтаксис */
  @keyframes upload {
    from { transform: translateY(35px); }
    to { transform: translateY(-35px); }
  }
  </style>
 </head>
 <body class="bg-color onload">
  <center>
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
  </center>
 </body>
</html>

---

Демонстрация: код в песочнице SoloLearn
Надеюсь, что это поможет Вам при создании Вашего веб-сайта. Это был самый простой пример экрана загрузки и поэтому я советую Вам не ограничивать свою фантазию. На этом желаю Вам удачи в вёрстке и прощаюсь.