Анимация в CSS3

[iKNG]

Собственно, недавно хотел проявить участие в мини-конкурсе (про Новый год) на этом форуме. Там надо сделать зацикленную анимацию. Я сначала подумал, куда ж тут без JavaScript. Я-то тогда думал, что анимацию в CSS3 можно делать только при наведении курсора (transition). Ну и забросил, я в JavaScript не очень разбираюсь (только если со справочником чего путного могу сделать), я больше по серверным технологиям.

Так вот, поучаствовал в другом мини-конкурсе и начал рассматривать работы конкурентов. Увидел у одного участника такой код:

animation: roll 1s infinite  linear;

Удивился. Откуда такое свойство взялось? Весь HTMLBook перерыл, не нашел такого. Этот пропуск в информации на том сайте остановил меня в развитии.

Собственно, кто может разъяснить, что за свойство, как его использовать, какие значения и т.д? И есть ли другие свойства для анимации, кроме этого и transition?

Edited November 20, 2013 by iKNG

[npofopr]

Полистайте http://codepen.io/search?q=animation&limit=all&order=popularity&depth=everything

Думаю появится еще больше вопросов

 

https://daneden.me/animate/

 

Погуглите: css3 анимация

[Catherine]

  On 11/20/2013 at 2:34 PM, iKNG said:

Весь HTMLBook перерыл, не нашел такого. Этот пропуск в информации на том сайте остановил меня в развитии. Собственно, кто может разъяснить, что за свойство, как его использовать, какие значения и т.д? И есть ли другие свойства для анимации, кроме этого и transition?

Из рунетовских источников тут можно посмотреть. Еще неплохо про CSS анимации написано на javascript.ru. Из англоязычных, можно почитать, например, тут.

[maxyc]

Сделал перевод статьи по анимациям для начинающих. От и до расписано что для чего. Живые примеры тут же в тексте. Можно копировать и вставлять сразу к себе на сайт.

http://devdocs.ru/verstka/css3-animations-for-beginners/