Анимация

transition-delay
sm
md
lg
xl
hover

Вы можете использовать специальные классы, позволяющие анимировать элементы на вашей странице.

Демонстрация

С помощью данной демонстрации вы можете увидеть анимацию в действии.

SIMAI FRAMEWORK 4 Выберите стиль анимации для демонстрации

Использование

Для добавления анимации к элементу необходимо добавить класс .animated. Также необходимо указать тип анимации добавив один из следующих классов: .bounce, .flash, .pulse, .rubberBand, .shake, .headShake, .swing, .tada, .wobble, .jello, .bounceIn, .bounceInDown, .bounceInLeft, .bounceInRight, .bounceInUp, .bounceOut, .bounceOutDown, .bounceOutLeft, .bounceOutRight, .bounceOutUp, .fadeIn, .fadeInDown, .fadeInDownBig, .fadeInLeft, .fadeInLeftBig, .fadeInRight, .fadeInRightBig, .fadeInUp, .fadeInUpBig, .fadeOut, .fadeOutDown, .fadeOutDownBig, .fadeOutLeft, .fadeOutLeftBig, .fadeOutRight, .fadeOutRightBig, .fadeOutUp, .fadeOutUpBig, .flipInX, .flipInY, .flipOutX, .flipOutY, .lightSpeedIn, .lightSpeedOut, .rotateIn, .rotateInDownLeft, .rotateInDownRight, .rotateInUpLeft, .rotateInUpRight, .rotateOut, .rotateOutDownLeft, .rotateOutDownRight, .rotateOutUpLeft, .rotateOutUpRight, .hinge, .rollIn, .rollOut, .zoomIn, .zoomInDown, .zoomInLeft, .zoomInRight, .zoomInUp, .zoomOut, .zoomOutDown, .zoomOutLeft, .zoomOutRight, .zoomOutUp, .slideInDown, .slideInLeft, .slideInRight, .slideInUp, .slideOutDown, .slideOutLeft, .slideOutRight, .slideOutUp.

Анимация запускается сразу после появления элемента на странице. Для бесконечной анимации необходимо добавить класс .infinite.

Прыгай!
<div class="text-4 animated bounce infinite">Прыгай!</div>

Анимация при прокрутке

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

1
2
3
4
5
6
7
8
9
10
<div class="sf-example" data-example-id="">
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-red wow bounceInUp">
    <div class="align-middle color-on-surface-inverse text-4">1</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-pink wow tada">
    <div class="align-middle color-on-surface-inverse text-4">2</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-deep-purple wow fadeInLeft">
    <div class="align-middle color-on-surface-inverse text-4">3</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-indigo wow fadeInRight">
    <div class="align-middle color-on-surface-inverse text-4">4</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-blue wow fadeInUp">
    <div class="align-middle color-on-surface-inverse text-4">5</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-cyan wow slideInRight">
    <div class="align-middle color-on-surface-inverse text-4">6</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-teal wow bounceInLeft">
    <div class="align-middle color-on-surface-inverse text-4">7</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-green wow zoomInLeft">
    <div class="align-middle color-on-surface-inverse text-4">8</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-orange wow slideInUp">
    <div class="align-middle color-on-surface-inverse text-4">9</div>
  </div>
  <div class="inline-block m-1 hr-4 wr-4 text-center bg-deep-orange wow zoomInDown">
    <div class="align-middle color-on-surface-inverse text-4">10</div>
  </div>
</div>

Для управления анимацией вы можете использовать дополнительные параметры:

  • data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
  • data-wow-duration: Изменение длительности анимации;
  • data-wow-delay: Задержка перед стартом анимации;
  • data-wow-iteration: Количество повторений анимации.

Время вы можете указывать как в секундах s, так и в милисекундах ms.

1
2
3
4
5
<div class="inline-block m-1 hr-4 wr-4 text-center bg-red wow bounce" data-wow-duration="1s" data-wow-iteration="4">
  <div class="align-middle color-on-surface-inverse text-4">1</div>
</div>
<div class="inline-block m-1 hr-4 wr-4 text-center bg-pink wow fadeInRight" data-wow-delay="1s">
  <div class="align-middle color-on-surface-inverse text-4">2</div>
</div>
<div class="inline-block m-1 hr-4 wr-4 text-center bg-deep-purple wow fadeInRight" data-wow-delay="1500ms">
  <div class="align-middle color-on-surface-inverse text-4">3</div>
</div>
<div class="inline-block m-1 hr-4 wr-4 text-center bg-indigo wow fadeInRight" data-wow-delay="2s">
  <div class="align-middle color-on-surface-inverse text-4">4</div>
</div>
<div class="inline-block m-1 hr-4 wr-4 text-center bg-blue wow fadeInRight" data-wow-delay="2500ms">
  <div class="align-middle color-on-surface-inverse text-4">5</div>
</div>

Адаптивность

Для управления задержкой перехода, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:delay-3 для установки задержки перехода в 150ms для экранов размером Medium и больше.

<div class="md:delay-3 ..."></div>

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

Изменить статью