Анимационная загрузка CSS3

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

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

Демо

Большую часть, для этого используются файлы GIF, которые работают непрерывно. Как правило, создание загрузки графического изображения требуется хорошее знание фото редактирования программного обеспечения, таких как Photoshop , CorelDraw или аналогичных фото-редакторов, многие из них тяжелые для загрузки.

примеры загрузки анимации
Примеры Загрузки файлов GIF

Лучшей альтернативой таких тяжелых графических изображений, это использовать CSS3. С использованием только базовых элементов HTML и свойств CSS3 таких как 3D transform можно создавать красивые и очень легкие анимации. Одним из основных преимуществ использования метода CSS то что он не требует долгой загрузки так как изображений в формате GIF. Они гораздо быстрее и доступны, когда мы нуждаемся в них.

Если вы не знакомы с свойством преобразования из CSS3, тогда я рекомендую вам ознакомиться с CSS3 2D и 3D Transform .

Дальше показано, как создавать красивые загрузки и анимации, используя только CSS3 и HTML.

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

Структура использования HTML

Мы создадим контейнер div с классом loadingdiv и в него вставим пять элементов span .

Пример:


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


Загрузка анимации, будет состоять из пяти кругов, как на рисунке ниже:

Анимационная загрузка с помощью CSS3
Анимационная загрузка с помощью CSS3

Каждые круги имеют различные цвета, но с одинаковыми свойствами CSS, который мы увидим дальше.



.loadingdiv span{
 display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  margin: 50px auto;
  background: #174C4F;
  border-radius: 5px;
  -webkit-animation: loading 0.9s infinite alternate;
  -moz-animation: loading 0.9s infinite alternate;
  box-shadow:1px 1px 1px #444444;
}


У нас span со свойством inline-block так что каждый круг проплывает рядом с предыдущей службой.

Нашей следующей целью является изменение цвета каждого круга.

Давайте посмотрим, как это сделать:



.loadingdiv span:nth-of-type(2) {
  background: #207178;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
}
.loadingdiv span:nth-of-type(3) {
  background: #FF9666;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
}
.loadingdiv span:nth-of-type(4) {
  background: #FFE184;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
}
.loadingdiv span:nth-of-type(5) {
  background: #F5E9BE;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
}


Мы использовали nth-of-type псевдо-класс для установки цвета каждого соседнего круга. Вы видите, также имеется задержка 0, 2S в анимации для каждого диапазона. Таким образом span покажет анимацию в постоянной основе.

Теперь давайте определим анимации с помощью Преобразования CSS3 и ключевых кадров.



@-webkit-keyframes loading {
  0% {
  width: 10px;
  height: 10px;
  -webkit-transform: translateZ(0);
  }
  100% {
  width: 24px;
  height: 24px;
  -webkit-transform: translateZ(-21px);
  }
}
@-moz-keyframes loading {
  0% {
  width: 10px;
  height: 10px;
  -moz-transform: translateZ(0);
  }
  100% {
  width: 24px;
  height: 24px;
  -moz-transform: translateZ(-21px);
  }
}


Как вы видите, мы снова имеем преимущественное право на вендора кадр определения. Вы должны определить имущество каждого диапазона при 0% времени, и в размере 100% времени, т.е., на стадии завершения.

Мы должны задать ширину и высоту круга на 10px при 0% и 24px на 100% . Таким образом каждый круг растет последовательно один за другим.

Чтобы сделать их внешний вид более стильным мы использовали translateZ , который установлен в 0px при 0% и- 21px на 100% . Это даст эффект круга.

Анимационная загрузка с помощью CSS3
Анимационная загрузка с помощью CSS3

Теперь давайте немного поэкспериментируем!

Попробуйте изменить преобразование от transformZ до transformY . Вы получите другой эффект, круги будут двигаться вертикально.

Анимационная загрузка с помощью CSS3
Анимационная загрузка с помощью CSS3

2) Удалите фон от каждого диапазона и сделайте их одним и тем же цветом. Давайте зальем цветом #888888 . Также добавьте opacity:0.1 при 0% и преобразования opacity:1 на 100% преобразования. Должно быть так:

Анимационная загрузка с помощью CSS3
Анимационная загрузка с помощью CSS3

Заключение

Таким образом, вы можете создать стильную загрузку анимации без photoshop. Можно, конечно, использовать творчество CSS3, чтобы сделать более оригинальнее, чем просто круги, как в примере.

1 комментарий на тему “Анимационная загрузка CSS3”

  1. комментарии

    Вчера я вдруг наткнулся на один полезный адрес в интернете и с приятным удивлением обнаружил это:
    Спасибо всем!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>