Идея

Соберём персонажа из обычных блоков: голова, глаза, тело. Каждый элемент — div с абсолютным позиционированием, а движение задаётся двумя анимациями: покачивание тела и «моргание» глаз.

HTML-разметка

<div class="eve">
  <div class="eve-face">
    <div class="left-eye"><div class="pupil"></div></div>
    <div class="right-eye"><div class="pupil"></div></div>
  </div>
  <div class="eve-body"></div>
</div>

CSS: фигура и позиции

.eve { position: relative; width: 250px; height: 400px;
  animation: motion 2s infinite; }

.eve-face { position: absolute; top: 60px; left: 80px;
  width: 90px; height: 70px; background: #fff;
  border-radius: 100px 100px 45px 45px; }

.left-eye, .right-eye { position: absolute; top: 30px;
  width: 20px; height: 12px; background: #067fe2;
  clip-path: ellipse(50% 45% at 50% 50%);
  animation: eyeblink 2s infinite; }

CSS: анимация

@keyframes motion {
  0% { transform: translateY(0); }
  50% { transform: translateY(-60px); }
  100% { transform: translateY(0); }
}

@keyframes eyeblink {
  0%, 30%, 35%, 100% { transform: scale(1); }
  33%, 34% { transform: scale(1, 0); }
}

Второй набор ключевых кадров делает глаза плоскими на два процента времени — этого достаточно, чтобы моргание читалось, но не раздражало.

Что учесть

• Анимируйте transform и opacity: они не вызывают перерасчёт вёрстки, в отличие от top и width.
• Добавьте prefers-reduced-motion — часть людей отключает анимацию в системе.
• Бесконечная анимация жрёт батарею на мобильных: ставьте паузу, когда блок вне экрана.
• Фигуру из десятков div лучше заменить на SVG, если элементов больше пяти.

Нужен сайт, а не только пример?

Сделаю анимацию аккуратно: чтобы она не мешала читать и не съедала скорость. Проверю на мобильных и учту системную настройку «уменьшить движение». С 2009 года, по договору.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: кнопка на CSS, обзор CSS, виджет WhatsApp, про Django.