Пример использования CSS переменных для анимации
Переменные в CSS появились в основном для создания анимаций. На этом уроке мы сделаем лоадер с летающим по заданной траектории самолетом. Это будет очень увлекательное занятие!
HTML разметка
Мы собираемся построить лоадер, состоящий из маленьких кругов образующих окружность. Одна окружность соответствует одному тегу span. Для объявления переменной нужно поставить два дефиса, произвольное имя переменной (i) и через двоеточие указать значение переменной. В нашем случае, значениями служат цифры от 1 до 20.
// Ссылка на библиотеку с иконками FontAwesome
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<section>
<div class="loader">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
<div class="plane"></div>
</div>
</section>
CSS код
Приступаем к стилизации: подготавливаем место для лоадера (фон, позиционирование, размеры).
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center; /*горизонтальное выравнивание*/
align-items: center; /*вертикальное выравнивание*/
flex-wrap: wrap;
min-height: 100vh; /*на всю высоту экрана*/
background: #03a9f4; /*цвет фона*/
}
.loader{
position: relative; /*относительное позиционирование*/
width: 120px; /*ширина лоадера*/
height: 120px; /*высота лоадера*/
}
Рисуем одну окружность, как псевдоэлемент.
.loader span:before {
content: "";
position: absolute; /*абсолютное позиционирование*/
top: 0;
left: 0;
width: 15px; /*ширина круга*/
height: 15px; /*высота круга*/
border-radius:50%;/*скругление углов*/
background: #fff; /*цвет круга*/
...
}
На самом деле нам надо 20 таких окружностей. Мы не зря в HTML разметке прописали 20 тегов span c числовыми значениями у переменных. Вместо переменной i, подставится результат следующей формулы и наши круги образуют окружность. Произойдет трансформация поворота на 18 градусов для каждого круга, таким образом круги равномерно распределятся по окружности.
.loader span {
...
// 18x1=18deg, 18x10=180deg .., 18x20=360deg
transform: rotate(calc(18deg * var(--i)));
}
Создание анимации
Анимация состоит из четырех кадров. В первом кадре (0%) круги невидимы, они масштабируются до 0. Во втором кадре (10%) увеличиваются в размерах, на 3-ем и 4-ом кадре снова исчезают. И все это происходит одновременно со всеми кругами.
@keyframes animate{
0%
{
transform: scale(0);
}
10%
{
transform: scale(1.2);
}
80%,100%
{
transform: scale(0);
}
}
А мы хотим, чтобы затухание и появление происходило по очереди. Для этого установим задержку анимацию, используя формулу в аргументах функции calc().
.loader span:before{
transform: scale(0); /*элемент невидим*/
animation: animate 2s linear infinite; /*название, время и длительность анимации*/
animation-delay: calc(0.1s * var(--i)); /*задержка анимации*/
}
Мы добились эффекта, когда кружки двигаются по окружности, плавно исчезая и снова появляясь. Не хватает еще летящего самолета.
Летящий по кругу самолет
Вставим в эту конструкцию иконку самолета, для усиления эффекта.
// самолет стоит на месте
.plane:before{
content: 'f072'; /*код иконки plane с FontAwesome*/
font-family: fontAwesome; /*название шрифта*/
position: absolute;
top: 80px; /*начальная позиция самолета сверху*/
left: 85px; /*начальная позиция самолета слева*/
color: #fff; /*цвет самолета*/
font-size: 60px; /*размер самолета*/
transform: rotate(180deg); /*разворот самолета*/
}
Теперь самолет летает по кругу.
.plane{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: rotating 2s linear infinite;
animation-delay: -1s;
}
@keyframes rotating
{
0%
{
transform: rotate(10deg);
}
100%
{
transform: rotate(370deg);
}
}
Посмотрите пример на CodePen
