③ Временная функция для ключевых кадров

Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Введение в CSS3-анимацию
• ② Ключевые кадры

Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру.

Пример

CSS

@keyframes bounce {
  from {
    top: 100px;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }
  50% {
    top: 100px;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

Пять ключевых кадров указаны для анимации с именем "bounce". Между первым и вторым ключевым кадром (то есть между 0% и 25%) используется функция замедления. Между вторым и третьим (то есть между 25% и 50%) — функция плавного ускорения. И так далее. Элемент будет перемещаться вверх по странице на 50px, замедляясь по мере того, как он достигнет своей наивысшей точки, а затем ускоряясь, когда он упадет до 100px. Вторая половина анимации ведет себя аналогичным образом, но только перемещает элемент на 25px вверх по странице.

Временная функция, указанная в ключевом кадре to или 100%, игнорируется.

Продолжение в следующей статье!