Как сделать анимацию на сайте?

Question

[Space]

Мне нужно сделать анимацию для объекта, например, шарик, который скатится по наклонной поверхности. Перемещение понятно - transform: translateX(Y), но как сделать, чтобы он крутился до тех пор, пока не достигнет конечной точки?

Крутится может и rotate..., но не совсем понимаю как работать с Keyframes или что именно мне нужно...

Answer 1

[Олег]

примерно так ;) https://jsfiddle.net/1j6xrLbo/

Comments

[Space]

Отлично, то что нужно! А можно сделать так, чтобы выполнялись анимации по очереди? Например первая (from - to), а потом вторая с этим же объектом.

[Space]

https://jsfiddle.net/1j6xrLbo/3/ хотя сам сделал)

Answer 2

[Алексей Скляров]

Почитайте про addeventlistener в javascript, это самый просто способ сделать анимацию, которая вам нужна. Готовое решение никто вам не покажет, потому что нужно четко понимать, что нужно сделать.

Коротко могу сказать про этот eventlistener: с помощью него можно отловить начало/финиш анимации (в вашем случае это движение от и до), после чего просто добавить/убрать css класс вашей анимации.

Answer 3

[2cha.headz]

Поглядите, выберите и используйте то, что больше подходит =)
webformyself.com/top-9-bibliotek-dlya-animacii-v-2...