Создание анимации морфинга с помощью ванильного CSS

Узнайте, как реализовать трансформацию с помощью CSS — техники преобразования одного внешнего вида в другой.

Что такое морфинг?

Морфинг — это техника, при которой вы трансформируете один внешний вид в другой. Это анимация с изменением формы, когда двухмерный объект, скажем, изображение, фигура или что-то подобное, превращается в другую форму.

В этой статье для простоты мы создадим div, который чередуется между квадратом и кругом.

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

.spinner {
  width: 100px;
  height: 100px;
  animation: Morph 2000ms infinite;
}

Чтобы элемент изменил свою форму, нам нужно определить пользовательскую анимацию с именем Morph. Когда анимация Morph находится в 0 и присутствует 100, мы устанавливаем радиус границы на 50%, чтобы элемент принял форму круга, и мы устанавливаем радиус границы на 0, когда анимация составляет 50%, чтобы он снова стал квадратным. .

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

@keyframes Morph {
 0%, 100% {
   border-radius: 50%;
   transform: rotate(0deg);
   background-color: pink;
 }
 50% {
   border-radius: 0%;
   transform: rotate(180deg);
   background-color: lightblue;
 }
}

Наконец, наша анимация морфинга работает, и вы можете увидеть и поиграть с окончательным кодом на nexuscode.online.