Анимации и переходы

uStatic CSS включает набор утилитарных классов для анимаций и переходов.

Анимации

Blink

Мигание элемента:

Просмотр

Мигающий текст

Код

<div class="blink text-lg">Мигающий текст</div>

<div class="blink">Мигающий текст</div>

Spin

Вращение элемента на месте. Доступно от 1 до 10 (умножается на 0.25с). На блочный элемент без ширины класс сам сжимается до содержимого (width: fit-content).

Просмотр

⚙️Загрузка…

Код

<div class="flex items-center gap-2">
  <span class="inline-block animation:spin-4 text-2xl line-height-2xs">⚙️</span>
  <span class="text-gray-600">Загрузка…</span>
</div>

<span class="inline-block animation:spin-4">⚙️</span>

Pulse

Пульсация при нажатии (используется с :active):

Просмотр

Нажми меня

Код

<button
  class="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer active:pulse"
>
  <p>Нажми меня</p>
</button>

<button class="active:pulse">Нажми меня</button>

Переходы (Transitions)

Fade

Плавное появление/исчезновение. Классы для Vue <transition>:

Просмотр

Показать

Плавное появление / исчезновение

Классы fade-enter-* и fade-leave-* — те же, что ставит Vue.

Кнопка имитирует цикл <transition name="fade"> на CSS ustatic.

Код

<transition name="fade" mode="out-in">
  <div v-if="visible" class="p-4 bg-white border border-gray-200 rounded">
    Контент
  </div>
</transition>

<transition name="fade" mode="out-in">
  <div v-if="visible">Контент</div>
</transition>

Классы:

• .fade-enter-active, .fade-leave-active — transition
• .fade-enter-from, .fade-leave-to — невидимое состояние (opacity: 0)
• .fade-enter-to, .fade-leave-from — видимое состояние (opacity: 1)

Slide Up

Выезд элемента снизу:

Просмотр

Показать

Выезд снизу

Классы slide-up-enter-* и slide-up-leave-* — те же, что ставит Vue.

Кнопка имитирует цикл <transition name="slide-up"> на CSS ustatic.

Код

<transition name="slide-up">
  <div v-if="visible" class="p-4 bg-white border border-gray-200 rounded">
    Контент
  </div>
</transition>

<transition name="slide-up">
  <div v-if="visible">Контент</div>
</transition>

Классы:

• .slide-up-enter-active, .slide-up-leave-active — transition
• .slide-up-enter-from — невидимое состояние со смещением вниз
• .slide-up-leave-to — невидимое состояние со смещением вверх

Scale

Масштабирование элемента:

Просмотр

Показать

Масштабирование

Классы scale-enter-* и scale-leave-* — те же, что ставит Vue.

Кнопка имитирует цикл <transition name="scale"> на CSS ustatic.

Код

<transition name="scale">
  <div v-if="visible" class="p-4 bg-white border border-gray-200 rounded">
    Контент
  </div>
</transition>

<transition name="scale">
  <div v-if="visible">Контент</div>
</transition>

Классы:

• .scale-enter-active, .scale-leave-active — transition
• .scale-enter-from, .scale-leave-to — невидимое состояние с уменьшением (scale: 0.95)

Утилитарные классы

Hover Lift

Подъём элемента при наведении:

Просмотр

Наведи на меня

Код

<div
  class="hover:lift inline-block p-4 bg-white border border-gray-200 rounded"
>
  <p>Наведи на меня</p>
</div>

<div class="hover:lift">Наведи на меня</div>

Эффект: при наведении элемент поднимается вверх с тенью.

Hover Show / Hide

Появление оверлея при наведении на родителя. Сам по себе hover:show скрывает элемент (opacity: 0, visibility: hidden); чтобы показать его при hover на карточке, оберните разметку в hover:show-target:

Просмотр

Наведи на карточку

Просмотр

Родитель — hover:show-target, оверлей — hover:show. Высота фиксирована, layout не прыгает.

Код

<div class="hover:show-target relative h-40 overflow-hidden rounded cursor-pointer">
  <div class="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-gray-100 text-gray-400">
  Фото
  </div>
  <div class="hover:show absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-black bg-opacity-50">
    <span class="text-white px-4 py-2 rounded bg-primary-500">Просмотр</span>
  </div>
</div>

<div class="hover:show-target relative h-40 overflow-hidden rounded">
  <div class="absolute top-0 right-0 bottom-0 left-0 bg-gray-100">Превью</div>
  <div class="hover:show absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-black bg-opacity-50">
    <span class="text-white">Просмотр</span>
  </div>
</div>

Классы:

• .hover:show-target — при наведении на контейнер показывает вложенный .hover:show
• .hover:show — скрытый слой (оверлей, подпись, кнопка действия)
• .hover:underline--{color} — анимированное подчёркивание ссылки (см. ниже)

Hover Underline

Просмотр

Ссылка с подчёркиванием

Код

<a
  href="#"
  class="hover:underline--primary-500 text-primary-600 font-medium"
  onclick="return false;"
>
  <p>Ссылка с подчёркиванием</p>
</a>

<a href="#" class="hover:underline--primary-500">Ссылка</a>

Примеры использования

Анимация загрузки

Просмотр

Загрузка…

Код

<div class="flex items-center gap-2">
  <span class="flex items-center justify-center w-6 h-6 animation:spin-2">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
      ></path>
    </svg>
  </span>
  <span>Загрузка…</span>
</div>

Интерактивная карточка

Просмотр

Карточка

Наведи на меня для эффекта подъёма

Код

<div
  class="hover:lift inline-block p-6 bg-white border border-gray-200 rounded cursor-pointer"
>
  <h3 class="text-lg font-bold text-gray-800 mb-2">Карточка</h3>
  <div class="text-gray-600">Наведи на меня для эффекта подъёма</div>
</div>

Уведомление с анимацией

Просмотр

✓ Успешно выполнено

Код

<div
  class="inline-block p-4 bg-green-50 border border-green-200 rounded active:pulse cursor-pointer"
>
  <p>✓ Успешно выполнено</p>
</div>