Далеко не все CSS свойства поддаются анимации. Так, например, для background-color
можно использовать транзишин, а для background-image
уже нет.
Актуальный список свойств можно найти на странице — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.
Ещё нужно учитывать тот факт, что анимация не срабатывает сразу после добавления элемента в документ или удаления свойства display: none
. Это будет выглядеть так, как будто бы анимация сразу оказалась в своём конечном состоянии. Это ограничение можно преодолеть, если менять CSS свойство, участвующее в анимации, с небольшой задержкой в колбеке
window.setTimeout()
.
Бонус: jQuery Transition Events Plugin — плагин, позволяющий отслеживать завершение CSS-анимации в скриптах.
Комментарии к заметке: 5