Опыты с CSS: колебания

Колебания — это визуальное представление волн любого типа, например, звуковых. В нашем примере мы не будем привязывать колебания к каким-то настоящим данным, но вы при желании можете попробовать это сделать при помощи JavaScript.

Скриншот конечного результата:

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

Создаем основу

Для начала нам нужно создать несколько блоков div, обернутых в section. У каждого div будет уникальный класс.

<section>
    <div class="wave0">
    </div>
    <div class="wave1">
    </div>
    <div class="wave2">
    </div>
    <div class="wave3">
    </div>
    <div class="wave4">
    </div>
    <div class="wave5">
    </div>
    <div class="wave6">
    </div>
</section>

Можете назвать эти классы, как вам угодно, я ограничился простыми wave0-wave6, чтобы все было понятнее.

Для создания макета мы используем flexbox. Также мы применим селектор * для стилизации всех классов сразу. Так нам не придется дублировать селекторы или правила.

section:

section {
  display: flex;
  gap: 15px;
  margin-top: 5vw;
}

div:

[class*='wave'] {
  aspect-ratio: .125/1;
  background-color: white;
  border-radius: 15px;
  width: .5vw;
}

Это даст нам следующий результат (кроме названия, конечно):

Анимация

Создаем кейфреймы

Мы создаем описание анимации, используя @keyframes с именем waveform.

@keyframes waveform {
  0% {
    transform: scaleY(.5);
  }
  50% {
    transform: scaleY(1.5);
  }
  100% {
    transform: scaleY(.5);
  }
}

При применении к любому элементу эта анимация будет приводить к изменению размера элемента по оси Y:

• при 0% — до половины размера по вертикали (т. е. высоты)
• при 50% — до 1,5 высоты
• при 100% — обратно до половины высоты

Примечание. Если бы мы применили поворот на 90 градусов, ось Y соответствовала бы размеру по горизонтали. Об этом важно помнить, работая с более сложными анимациями.

Чтобы применить нашу анимацию, мы изменим набор правил для [class*='wave'], включив в него объявление animation.

[class*='wave'] {
  aspect-ratio: .125/1;
  /*This can all be written on one line:*/
  animation: waveform var(--wavefreq)
             ease-in-out infinite
             forwards;
  background-color: white;
  border-radius: 15px;
  width: .5vw;
}

Здесь мы видим свойство animation и несколько значений, соответствующих другим свойствам, таким как animation-name, animation-duration, animation-timing-function. Я не буду здесь расписывать, что означает каждое из них, это можно прочесть в документации.

А как насчет var()?

Вы наверняка заметили, что я включил в animation пользовательское свойство (их также часто называют CSS-переменными). Это важно, потому что позволит нам изменять значение скорости анимации (animation-duration), не объявляя заново анимацию для каждого из наших классов.

Объявление переменной

Добавьте этот отрывок кода вверху вашего CSS-файла:

:root {
  --m: 17.5;
  --wavefreq: calc(100ms * var(--m));
}

Этот код велит браузеру создать два пользовательских свойства: —m, которое работает как константа, и —wavefreq, которое вычисляет тайминг нашей анимации при помощи функции calc().

Наконец, проставляем тайминг для каждого класса отдельно

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

.wave1 {
  --wavefreq: calc(200ms * var(--m));
}

.wave2 {
  --wavefreq: calc(300ms * var(--m));
}

.wave3 {
  --wavefreq: calc(400ms * var(--m));
}

.wave4 {
  --wavefreq: calc(500ms * var(--m));
}

.wave5 {
  --wavefreq: calc(600ms * var(--m));
}

.wave6 {
  --wavefreq: calc(700ms * var(--m));
}

Результат

Немного поиграв со значениями («константой», количеством миллисекунд в функции calc() для каждой волны), можно добиться интересных результатов.

Исходный код + Пример

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

Перевод статьи «CSS Funstuff: Animated Waveforms».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]