Анимация состоит из кадров, соответственно, если требуется более тонкое управление анимацией, то используем animation, т.е.keyframes и промежуточные значения.
А для простой анимации transition.
Проще говоря: transition - для анимации "старт-финиш" animation- для анимации в которой нужно управлять кадрами
Хм, вы что-то путаете. Transform - это обычное свойство элемента, как width, height, background-color etc; и к анимации прямого отношения не имеет. Используя css есть два способа сейчас для анимаций: keyframes и transition, с animation-delay и transition-delay соответственно.
Edit: Ответ не имеет смысла, так как автор изменил вопрос.
@Urukhayy, сказать что лучше нельзя - оба варианта крутые; а разница лишь в использовании. Указав transition свойства не нужно вызывать анимацию явно - просто меняйте стили элемента и радуетесь. А keyframes анимации нужно явно указывать - мол сейчас стартуй Foo анимацию, но зато можно для элемента довольно сложные анимации создавать, почитайте про keyframes.
В вашем случае, когда у вас есть Н-блоков и поочередно нужно проанимировать например translateX, то используйте transitions + transition-delay для каждого элемента; потом в нужный момент просто меняете transform для всех элементов и и они поочерёдно сместятся.
