Геометрические фигуры в CSS-анимации

Хабр, привет!

Я во фронтенде настолько давно, что учился верстать по текстовым туториалам. В начале десятых годов я и все мои знакомые фронтендеры обязательно были подписаны на рассылки, в которых авторы делились креативными штуками.

По моим ощущениям, сейчас их стало меньше. Все ушли в YouTube, а теперь в ChatGPT. Но мне этот формат не подходит, поэтому я пришёл сюда, к вам.

В прошлом году я создал коллекцию лоадеров. В основе анимации — базовые геометрические фигуры. Я их двигаю, преобразую из одной формы в другую и всё такое.

В этой статье я хочу рассказать весь процесс создания, начиная с самых базовых моментов. Сразу предупреждаю, что в этой статье не будет «живых» вставок. Все эффекты смотрите в моей демонстрации на CodePen.

Давайте посмотрим, что я вам подготовил.

Свойства width и height

Начнём мы с теории. Как создавать разные фигуры в CSS?

В CSS сложно разгуляться в плане фигур. Как ни крути, мы будем плясать вокруг прямоугольников, потому что в CSS любой элемент представлен ими. Соответственно, чтобы создать его, нам нужно установить свойства width и height.

Здесь мы уже можем получить два вида прямоугольника. У первого ширина будет больше высоты, а у второго наоборот: высота будет больше ширины.

<body>
  <div class="awesome-block"></div>
  <div class="awesome-block"></div>
</body>

.awesome-block {
  background-color: tomato;
}

/* прямоугольник с шириной большей, чем высота */
.awesome-block:nth-child(1) {
  width: 200px;
  height: 100px;
}

/* прямоугольник с шириной меньшей, чем высота */
.awesome-block:nth-child(2) {
  width: 100px;
  height: 200px;
}

Не уходя далеко от прямоугольников, создадим квадрат. На моих уроках геометрии рассказывали, что квадрат — это частный случай прямоугольника, у которого все стороны равны. Следовательно, нужно добавить одинаковое значение для свойств width и height.

.awesome-block {
  background-color: tomato;
}

/* прямоугольник с шириной большей, чем высота */
.awesome-block:nth-child(1) {
  width: 200px;
  height: 100px;
}

/* прямоугольник с шириной меньшей, чем высота */
.awesome-block:nth-child(2) {
  width: 100px;
  height: 200px;
}

/* квадрат */
.awesome-block:nth-child(3) {
  width: 200px;
  height: 200px;
}

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

Свойство border-radius

Для начала мы рассмотрим свойство border-radius. С помощью него мы можем получить несколько видов овала.

.awesome-block {
  background-color: tomato;
  width: 200px;
  height: 100px;

  border-radius: 10px;
}

И, конечно же, мы можем создать окружность, объявив самое распространённое значение 50%. Только изначально нужно использовать квадрат, а не прямоугольник.

.awesome-block {
  background-color: tomato;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

Свойство clip-path

Следующим способом создания фигур в CSS является свойство clip-path. С помощью него мы будем «вырезать» из прямоугольника разные формы.

Сделать это мы можем, установив для свойства clip-path значение с помощью пяти функций inset(), circle(), ellipse(), polygon() и path(). Рассмотрим каждую.

Функция inset() позволяет «обрезать» элемент по форме четырёхугольника. Значение устанавливается с помощью четырёх координат, по которым происходит «обрезка» элемента. Его можно объявить несколькими способами, по аналогии со свойствами margin, padding и т. д.

.awesome-block {
  background-color: tomato;
  width: 200px;
  height: 100px;

  clip-path: inset(10px 20px 5px 15px);
  /*
    или 
    clip-path: inset(10px);
    clip-path: inset(10px 20px);
    clip-path: inset(10px 20px 5px);
  */
}

С помощью функции circle() мы можем вырезать окружность. Значение определяет её радиус.

.awesome-block {
  background-color: tomato;
  width: 200px;
  height: 100px;

  clip-path: circle(50px);
}

Функция ellipse() похожа на функцию circle(), только вместо окружности мы получаем эллипс. Также разница между функциями заключается в том, что мы устанавливаем два радиуса.

.awesome-block {
  background-color: tomato;
  width: 200px;
  height: 100px;

  clip-path: ellipse(30px 50px);
}

С помощью функции polygon() мы можем обрезать элемент по форме многоугольника. В качестве значения мы будем устанавливать координаты точек, по которым будет происходить «обрезка» элемента.

.awesome-block {
  background-color: tomato;
  width: 200px;
  height: 100px;

  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);;
}

И, наконец-то, последняя функция path(). Она позволяет использовать элемент svg, чтобы «вырезать» область любой формы.

.awesome-block {
  background-color: tomato;
  width: 200px;
  height: 100px;

  clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");
}

Далее давайте рассмотрим, как происходит анимация значения свойства clip-path.

Анимация фигур и свойство clip-path

Анимация фигур в целом не должна вызвать проблем, если мы работаем со свойствами width, height и border-radius. Но вот со свойством clip-path есть нюанс.

Если в анимации используется свойство clip-path, то нам обязательно нужно помнить о количестве координат. Они не должны запутать браузеры.

Для демонстрации проблемы я попробую сделать анимацию перехода из ромба в треугольник. Для этой задачи я воспользуюсь функцией polygon().

.awesome-block {
  background-color: tomato;
  width: 400px;
  height: 400px;

  animation: transformation 5s infinite alternate;
}

/* анимация не работает, потому что количество точек в функции polygon() не совпадает */
@keyframes transformation {
  0%, 20% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
	
  80%, 100% {
    clip-path: polygon(50% 0%, 100% 50%, 0% 50%);
  }
}

Если вы сделаете эту демонстрацию в любой онлайн-песочнице, вы увидите, что анимация не работает. Причина находится в сценарии анимации.

Поскольку я использую функцию polygon() с разным количеством координат, браузеры не могут правильно выполнить анимацию. По этой причине они не анимируют переход, а просто меняют фигуры.

Чтобы всё же анимация работала, нам нужно использовать одинаковое количество координат во всех местах, где используется функция polygon(). Исправлю код из предыдущего примера.

.awesome-block {
  background-color: tomato;
  width: 400px;
  height: 400px;

  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
	
  80%, 100% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 50%, 0% 50%);
  }
}

Теперь ромб будет плавно перетекать в треугольник, смещая нижняя часть в середину.

Работа с функцией polygon() нравится мне тем, что у нас есть множество вариантов для создания анимации. Например, давайте сделаем ещё одну анимацию с тем же результатом, но в этот раз мы сделаем это за счёт движения абсолютно всех координат!

.awesome-block {
  background-color: tomato;
  width: 400px;
  height: 400px;

  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
	
  80%, 100% {
    clip-path: polygon(100% 50%, 50% 50%, 0% 50%, 50% 0%);
  }
}

Надеюсь, вы обязательно посмотрите на эту красоту. Добавил вам интриги?

Подводя итог этого раздела, я хочу сказать, что мы можем использовать сколько угодно координат при создании фигур. Это открывает нам множество возможностей для нестандартной анимации. Единственным ограничением будет только фантазия разработчика.

Давайте как раз создадим несколько видов анимации.

Анимация «Квадрат — Шестиугольник»

Не отходя далеко от свойства clip-path, сделаем с помощью него анимацию перехода из квадрата в шестиугольник, а потом обратно.

Изначально у нас будет отображён квадрат. Напишем основные стили для него.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

Поскольку у нас будет переход в шестиугольник, то нам нужно использовать шесть координат и продумать, как их расположить. Давайте для иллюстрации задачи я покажу финальное отображение фигуры.

У квадрата уже есть четыре вершины. Для шестиугольника нам нужны ещё две. Придётся их где-то спрятать. Я предлагаю недостающие вершины расположить в середине левой и верхней границ, потому что так будет проще их перемещать.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20%, 100% {
   /* координата "100% 50%" находится на вверхней стороне квадрата, координата "0 50%" на левой */
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
  }
}

Осталось подвинуть вершины. Первую и четвёртую координату сместим вперёд на 50%, а все остальные — на 25%.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20% {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
  }

  40%, 60%, 100% {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }
}

Отлично. На этом этапе у нас получится шестиугольник. Теперь нужно вернуть его обратно в квадрат. Я предлагаю сделать смещение каждой координаты ещё раз вперёд. Как и раньше, на 50% и 25%.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20% {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
  }

  40%, 60% {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }

  80%, 100% {
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 0 0);
  }
}

Анимация «Квадрат — Ромб»

Вторая анимация будет менять квадрат на ромб. Можно, конечно, использовать свойство rotate и повернуть квадрат по часовой стрелке, чтобы он стал ромбом. Но я снова буду использовать свойство clip-path.

Базовые стили квадрата я возьму из предыдущего примера.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

Поскольку у квадрата и ромба одинаковое количество вершин, нам не нужно прятать координаты. В этой анимации всё проще. Разместим координаты по четырём вершинам квадрата.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

Далее нам нужно сдвинуть каждую координату на 50%. Таким образом у нас получится поворот. Заодно мы получим визуальный эффект отдаления.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  40%, 60%, 100% {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }
}

Обратную трансформацию мы реализуем ещё одним смещением вперёд на 50%.

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: transformation 5s infinite alternate;
}

@keyframes transformation {
  0%, 20% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  40%, 60% {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }

  80%, 100% {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  }
}

Анимация «Колба»

Вот теперь давайте попробуем скомбинировать простые геометрические фигуры, чтобы у нас получилась «химическая колба».

Но начнём нашу работу с базовой стилизации элемента, где она будет находится.

<body>
  <div class="flask"></div>
</body>

.flask {
  width: 100px;
  height: 100px;
	
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

Рисовать «колбу» мы будем с помощью окружности и прямоугольника.

.flask::before,
.flask::after {
  content: "";
  background-color: tomato;
  position: absolute;
  bottom: 0;	
}

.flask::before {
  width: 33px;
  height: 28px;
  border-radius: 50%;
}

.flask::after {
  width: 10px;
  height: 48px;
}

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

<body>
  <div class="flask">
    <div class="flask-loader__bubble"></div>
    <div class="flask-loader__bubble"></div>
    <div class="flask-loader__bubble"></div>
    <div class="flask-loader__bubble"></div>
  </div>
</body>

.flask-loader__bubble::before,
.flask-loader__bubble::after{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: tomato;
}

Далее «пузырьки» нужно спрятать за «колбой».

.flask-loader__bubble::before,
.flask-loader__bubble::after{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: tomato;

  position: absolute;
  bottom : 15%;
  z-index: -1;
}

Также нужно учесть смещение между «пузырьками», чтобы они не летели друг за другом по линии. Первую группу пузырьков расположим чуть ближе к середине колбы, а вторую чуть дальше.

Для этого зададим свойство left со значением 48% для псевдо-элемента .flask-loader__bubble::before и значение 52% для псевдо-элемента .flask-loader__bubble::after.

.flask-loader__bubble::before,
.flask-loader__bubble::after{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: tomato;

  position: absolute;
  bottom : 15%;
  z-index: -1;
}

.flask-loader__bubble::before {
  left: 48%;
}

.flask-loader__bubble::after {
  left: 52%;
}

Осталось добавить для них анимацию. Сразу учтём задержку между элементами, чтобы они не взлетели одновременно.

.flask-loader__bubble::before,
.flask-loader__bubble::after{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: tomato;

  position: absolute;
  bottom : 15px;
  z-index: -1;
	
  animation: flask-loader 3s infinite backwards;
}

.flask-loader__bubble::before {
  left: 48%;
}

.flask-loader__bubble::after {
  left: 52%;
}

.flask-loader__bubble:nth-child(1)::after {
  animation-delay: .5s;
}

.flask-loader__bubble:nth-child(2)::before {
  animation-delay: .75s;
}

.flask-loader__bubble:nth-child(2)::after {
  animation-delay: 1s;
}

.flask-loader__bubble:nth-child(3)::before {
  animation-delay: 1.75s;
}

.flask-loader__bubble:nth-child(3)::after {
  animation-delay: 2.25s;
}

.flask-loader__bubble:nth-child(4)::before {
  animation-delay: 2.75s;
}

.flask-loader__bubble:nth-child(4)::after {
  animation-delay: 3.5s;
}

Сценарий анимации будет построен на перемещении «пузырьков» вверх с плавным исчезновением. Реализовать это помогут свойства трансформации и свойство opacity.

@keyframes flask-loader {
  0% {
    translate: -50% 0;
    scale: 1;
    opacity: 1;
  }

  85% {
    translate: -50% -100px;
    scale: 0;
    opacity: 0;
  }

  100% {
    translate: -50% -100px;
    scale: 0;
    opacity: 1;
  }
}

Заключение

Давайте подведём итог. В этой статье мы рассмотрели:

способы создания простых геометрических фигур с помощью свойств width, height border-radius и clip-path;
как можно комбинировать геометрические фигуры, получая нестандартные формы;
особенности анимации при свойстве clip-path;
технику создания фигур с разным количеством вершин и их анимацию.

Надеюсь, у меня получилось вдохновить вас на создание CSS-анимации. Я ничего против SVG-анимации не имею. Просто иногда она избыточна. По этой причине хочется, чтобы CSS-креатив тоже жил, и разработчики делали разные прикольные штуки. Дерзайте!

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

推荐订阅源

Все публикации подряд на Хабре