Кроссбраузерная keyframe анимация

934
views

CSS- сниппет для объявление кастомных кроссбраузерных анимаций, а также применение нескольких анимаций к одному элементу.

Базовая форма объявления анимации:


@-webkit-keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
#element {
  -webkit-animation: ANIMATION_NAME 5s infinite; /* Safari 4+ */
  -moz-animation:    ANIMATION_NAME 5s infinite; /* Fx 5+ */
  -o-animation:      ANIMATION_NAME 5s infinite; /* Opera 12+ */
  animation:         ANIMATION_NAME 5s infinite; /* IE 10+, Fx 29+ */
}

Пошаговая анимация

Пошаговая анимация задается в виде: в каком состоянии должен быть элемент в определенный % времени цикла


@keyframes ANIMATION_NAME {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

Если элемент имеет одинаковое положение/состояние в начале и конце анимации, то лучшим решением будет объединить их

@keyframes ANIMATION_NAME {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

Или же можно задать обратное выполнение анимации свойством animation-direction: alternate; (Со всеми вендорными префиксами):

animation: test 1s 2s 3 alternate backwards

Multiple animations

Вы можете комбинировать анимации, прописывая их через запятую:

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

Steps()

Функция Steps() сама разбивает длину шагов в анимации в зависимости сколько шагов задать в ней в качестве параметра:

@keyframes ANIMATION_NAME {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}
.block {
  animation: ANIMATION_NAME 10s steps(5) infinite alternate;
}

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

Браузерная поддержка: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+