[Из песочницы] Простая анимация загрузки в Material Design (CSS3)
Доброго времени суток, уважаемые читатели Хабрахабра! Меня зовут Александр Шевченко, я начинающий веб-разработчик. Перейдём к делу. Анимации в 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. Объединяем код
Последний штрих, конечно, самый банальный, однако всё же без него никак.
Экран загрузки
Демонстрация: код в песочнице SoloLearn
Надеюсь, что это поможет Вам при создании Вашего веб-сайта. Это был самый простой пример экрана загрузки и поэтому я советую Вам не ограничивать свою фантазию. На этом желаю Вам удачи в вёрстке и прощаюсь.
