Анимация

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

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

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

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="t-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="d-inline-block m-4 hr-4 wr-4 t-center bg-red wow bounceInUp">
    <div class="align-middle c-white t-4">1</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-pink wow tada">
    <div class="align-middle c-white t-4">2</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-deep-purple wow fadeInLeft">
    <div class="align-middle c-white t-4">3</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-indigo wow fadeInRight">
    <div class="align-middle c-white t-4">4</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-blue wow fadeInUp">
    <div class="align-middle c-white t-4">5</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-cyan wow slideInRight">
    <div class="align-middle c-white t-4">6</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-teal wow bounceInLeft">
    <div class="align-middle c-white t-4">7</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-green wow zoomInLeft">
    <div class="align-middle c-white t-4">8</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-orange wow slideInUp">
    <div class="align-middle c-white t-4">9</div>
  </div>
  <div class="d-inline-block m-4 hr-4 wr-4 t-center bg-deep-orange wow zoomInDown">
    <div class="align-middle c-white t-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="d-inline-block m-4 hr-4 wr-4 t-center bg-red wow bounce" data-wow-duration="1s" data-wow-iteration="4">
  <div class="align-middle c-white t-4">1</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-pink wow fadeInRight" data-wow-delay="1s">
  <div class="align-middle c-white t-4">2</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-deep-purple wow fadeInRight" data-wow-delay="1500ms">
  <div class="align-middle c-white t-4">3</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-indigo wow fadeInRight" data-wow-delay="2s">
  <div class="align-middle c-white t-4">4</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-blue wow fadeInRight" data-wow-delay="2500ms">
  <div class="align-middle c-white t-4">5</div>
</div>