Как изменить скорость анимации?

Question

[DrunkMaster]

Скачал библиотеку animate.css но все эффекты довольно быстро происходят, хотелось бы немного замедлить, там только CSS-файл, JS нет.
Можете на примере одного эффекта bounceInLeft пояснить где меняется скорость появления?

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

Answer 1

[Кирилл Несмеянов]

Ну например:

.bounceInLeft {
    animation: bounceInLeft 1s linear infinite;
    /* animation: [имя] [время работы] [функция анимации] [количество повторов]; */
}

Либо через отдельное свойство animation-delay: 10s;

Answer 2

[Денис Букреев]

Потрать несколько минут на прочтение статьи и сразу поймешь как работают эти анимации и, возможно, даже библиотека не понадобится)

Comments

[DrunkMaster]

В целом мне понятна как она работает, вопрос только один остался, если анимация привязана к элементу внизу страницы, то когда страница прогружается, внизу анимация уже проигрывается. Т.е. когда я прокручиваю страницу вниз анимация уже прошла и не работает...

[Денис Букреев]

DrunkMaster: с помощью JS отслеживаешь скролл, а когда скролл доходит до нужного элемента - вешаешь ему класс с нужной анимацией (либо забираешь класс .no-animation, через который запрещаешь анимацию)