CSS свойства, которые можно анимировать

Далеко не все 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-анимации в скриптах.