Animation vs Transition?

Question

[Urukhayy]

Что лучше, и в чем вообще разница?

Answer 1

[ModestesGonze]

Анимация состоит из кадров, соответственно, если требуется более тонкое управление анимацией, то используем animation, т.е.keyframes и промежуточные значения.
А для простой анимации transition.
Проще говоря:
transition - для анимации "старт-финиш"
animation- для анимации в которой нужно управлять кадрами

Answer 2

[Александр Кит]

Хм, вы что-то путаете. Transform - это обычное свойство элемента, как width, height, background-color etc; и к анимации прямого отношения не имеет. Используя css есть два способа сейчас для анимаций: keyframes и transition, с animation-delay и transition-delay соответственно.

Edit: Ответ не имеет смысла, так как автор изменил вопрос.

Comments

[Urukhayy]

Ну вопрос не до конца решен. Что все таки лучше и в чем разница? Что юзать то? Transition или Animation?

[Urukhayy]

А какой способ использует в jQuery .animate() ?

[Александр Кит]

@Urukhayy, сказать что лучше нельзя - оба варианта крутые; а разница лишь в использовании. Указав transition свойства не нужно вызывать анимацию явно - просто меняйте стили элемента и радуетесь. А keyframes анимации нужно явно указывать - мол сейчас стартуй Foo анимацию, но зато можно для элемента довольно сложные анимации создавать, почитайте про keyframes.

В вашем случае, когда у вас есть Н-блоков и поочередно нужно проанимировать например translateX, то используйте transitions + transition-delay для каждого элемента; потом в нужный момент просто меняете transform для всех элементов и и они поочерёдно сместятся.