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

Кроме того, мне нужно быстро упомянуть, откуда я лично узнал об этом, и вместо того, чтобы читать этот блог, вы можете сразу перейти к видео. Большое спасибо Курсу Дизайна на YouTube!

Давайте начнем!

Каждый раз, когда вы создаете SVG в иллюстраторе или любом другом используемом вами программном обеспечении и добавляете его в свой проект, html-код SVG выглядит примерно так:

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="blah blah blah"/>
    <path d="blah blah blah"/>
  </g>
</svg>

Круто то, что на эти теги <g></g> и <path /> можно нацеливаться и делать с ними все, что угодно!

Теперь важно, чтобы вы нацеливались на конкретный путь SVG, с которым вы хотите что-то делать. Чтобы быстро увидеть, какие пути есть какие, вы можете открыть инструменты разработчика в браузере, найти свой элемент SVG, развернуть его и просто просмотреть разные <path /> или <g></g>, чтобы увидеть, какие из них вы хотите настроить.

В моем случае:

Теперь, если у вас есть несколько <path />, которые составляют один объект, который вы хотите анимировать, оберните их тегом group <g></g>, и теперь эта группа — это то, к чему вы примените имя своего класса и на что будете ориентироваться с помощью CSS.

Теперь в моем случае я буду ориентироваться на две карты и применил к ним имя класса card.

Вот CSS для анимации карточек:

.card {
  animation-name: animateCard;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes animateCard {
  from {
    transform: translateX(0) translateY(0);
  }
  to {
    transform: translateX(20px) translateY(-20px);
  }
}

И бац! Я получил себе крутую анимацию!

Теперь, пожалуйста, не забудьте проверить канал YouTube, о котором я упоминал выше, он расскажет, как создать 3D-эффект на SVG и все такое!

Спасибо за чтение и хорошего чтения!