Пример использования CSS переменных для анимации

Пример использования CSS переменных для анимации

Пример использования 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; /*цвет круга*/
    ...
}

Пример использования CSS переменных для анимации

На самом деле нам надо 20 таких окружностей. Мы не зря в HTML разметке прописали 20 тегов span c числовыми значениями у переменных. Вместо переменной i, подставится результат следующей формулы и наши круги образуют окружность. Произойдет трансформация поворота на 18 градусов для каждого круга, таким образом круги равномерно распределятся по окружности.


.loader span {
    ...
// 18x1=18deg, 18x10=180deg .., 18x20=360deg

    transform: rotate(calc(18deg * var(--i)));
}

Пример использования CSS переменных для анимации

Создание анимации

Анимация состоит из четырех кадров. В первом кадре (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)); /*задержка анимации*/
}

Мы добились эффекта, когда кружки двигаются по окружности, плавно исчезая и снова появляясь. Не хватает еще летящего самолета.

Пример использования CSS переменных для анимации

Летящий по кругу самолет

Вставим в эту конструкцию иконку самолета, для усиления эффекта.


// самолет стоит на месте
.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);
    }
}

Пример использования CSS переменных для анимации

Посмотрите пример на CodePen

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий

5 × четыре =