Далеко не все 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-анимации в скриптах.
Коментарии к заметке
Анимации сразу после добавления элемента в документ можно достичь без JS, если использовать CSS свойство animation (вместо transition). Единственное, что анимируемые свойства придется перечислять дважды. http://jsfiddle.net/JbPTA/
Пример работает нестабильно как-то: в Firefox и IE 10 есть анимация, а в IE 9 и Chrome её нет.
Для Chrome просто префиксов не хватает. У animation чуть хуже поддержка, чем у transition.
Можно просто форсировать перерисовку, запросив свойство вроде
offsetTopилиoffsetWidth, например.Спасибо за шпаргалку свойств. Возьму в закладки.
offset тоже не везде работает. В Chrome нормально, а в IE не шлямит.