Потрясающая бесконечная анимация загрузки CSS

вступление

Если вы не живете в Румынии (в то время, когда я пишу этот пост, Румыния входит в пятерку стран с самой высокой скоростью интернета), вы, вероятно, тратите много времени на просмотр веб-страниц, как они загружаются. Текст, шрифты, цвета, изображения и так далее. Не будем говорить о том, сколько часов/дней/недель вы потеряли, глядя на это.

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

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

HTML и базовый CSS

На первом этапе мы создадим основные HTML и CSS, необходимые для анимации. Во-первых, нам нужна следующая HTML-разметка:

<div class="loading-animation">
  <span class="first-ball"></span>
  <span class="second-ball"></span>
  <span class="third-ball"></span>
</div>

У нас есть простой div который содержит три spanс. Каждый span на самом деле мяч в нашей анимации.

Далее мы сделаем style.css файл для настройки некоторых цветов. Сделаем их красивыми.

body {
  overflow:hidden;
  background:#ddd;
}


.loading-animation {
  position:absolute;
  top:50%;
  left:50%;
}

.first-ball, .second-ball, .third-ball {
  top:-50px;
  left:-150px;
  position:absolute;
  background:#4286f4;
  width:30px;
  height:30px;
  border-radius:50%;
}

Теперь у нас почти 3 шара по центру экрана. Мы позиционировали absolute обертка div и центрировал его с top а также left свойства как к 50%. Все мячи также absolute расположен внутри div. Я сказал «почти по центру», потому что они имеют небольшое смещение, потому что в конце концов они будут плавать вокруг центра.
Вы заметите только один шарик на экране, но не паникуйте. Вы видите это, потому что два других шара находятся под первым.

Первый ход

На этом этапе мы заставим шарики совершать движения с помощью @keyframes Правило CSS.

Чтобы описать анимацию с помощью этого правила, нам нужно сообщить браузеру определенные стили CSS для определенных моментов анимации. Для этого мы можем использовать проценты или ключевые слова from а также to. Итак, если у нас есть 10-секундная анимация: 0% соответствует началу, 30% опишет, как все выглядит через 3 секунды, 50% соответствует середине анимации (через 5 секунд) и так далее… браузер сделает волшебство между этим.

В конце концов, наша анимация будет использовать две анимации CSS: одну для вертикального движения и одну для горизонтального. Можно сделать одну анимацию как для вертикальной, так и для горизонтальной, но мы будем использовать две анимации, потому что нам нужны разные функции синхронизации для них. Итак, мы будем использовать два @keyframes правила.

Сделаем горизонтальную.

@keyframes horizontal {
  0% {
    left:-150px;
  }
  50% {
    left:150px;
  }
  100% {
    left:-150px;
  }
}

Горизонтальная анимация имеет 3 шага. Первый шаг такой же, как и последний, потому что у нас бесконечная анимация, и в конце цикла нам нужно, чтобы объекты были в том же месте, что и в начале.

Мы только что определили horizontal анимацию, и теперь мы должны добавить ее к трем шарам. Кроме того, поскольку шары движутся, мы можем ввести некоторые задержки для второго и третьего шаров, чтобы их увидеть.

.first-ball, .second-ball, .third-ball {
  ...
  animation:horizontal 2s infinite;
  animation-timing-function:ease-in-out;
}
.second-ball {
  animation-delay:0.2s;
}
.third-ball {
  animation-delay:0.4s;
}

Далее мы определим vertical анимация:

@keyframes vertical {
  0% {
    top:-50px;
  }
  50% {
    top:50px;
  }
  100% {
    top:-50px;
  }
}

Теперь нам нужно применить к шарам обе анимации, но с разным временем.

animation: horizontal 2s infinite, vertical 1s infinite;
animation-timing-function: ease-in-out, ease-in-out;

Это не очень похоже на знак бесконечности, но мы можем настроить некоторые вещи.

Некоторые корректировки

Во-первых, мы введем задержку для vertical анимация и все станет лучше. Первое значение относится к первой анимации (горизонтальной), а второе относится к вертикальной анимации:

.first-ball, .second-ball, .third-ball {
  ...
  animation-delay: 0s, .25s;
}
.second-ball {
  animation-delay:0.2s, 0.45s;
}
.third-ball {
  animation-delay:0.4s, 0.65s;
}

Во-вторых, давайте посмотрим, сможем ли мы сделать больше с функциями синхронизации. Мы использовали ease-in-out значение для обеих анимаций. Это свойство определяет кривую анимации. После того, как я немного поиграл с этим свойством, я получил более реалистичное движение. Если у вас хороший глаз, вы заметите разницу .

animation: horizontal 2s infinite, vertical 1s infinite;
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1), ease-in-out;

Сейчас анимация почти идеальна, но начало анимации мне очень не нравится. Он нуждается в некоторых улучшениях.
Шары начинаются где-то в левом верхнем углу, за пределами знака бесконечности. Чтобы избавиться от этого, мы можем создать fadeIn анимацию и добавить ее на .loading-animation. Конечно, только после того, как я поигрался с функцией времени, я пришел к этому:

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.loading-animation {
  ...
  animation: fadeIn 2s 1;
  animation-timing-function: cubic-bezier(.7, 0, 1, 1);
}

Некоторые цвета…

Чтобы анимация выглядела более профессионально, мы добавим немного цветов, прозрачности и теней. Итак, мы сделаем второй и третий шар немного менее заметными:

.second-ball {
  ...
  opacity:0.7;
}

.third-ball {
  ...
  opacity:0.5;
}

После этого мы можем добавить к ним тень:

.first-ball, .second-ball, .third-ball {
  ...
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

И, наконец, последняя анимация CSS в этой статье, цвет:

@keyframes color {
  50% {
    background:#cd43ef;
  }
}

Эта анимация также будет идти по трем шарам:

.first-ball, .second-ball, .third-ball {
  ...
  animation:horizontal 2s infinite, vertical 1s infinite, color 3s infinite;
}

Вариации

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

Надеюсь, это было полезно для вас!