Как использовать переходы css3 для анимации элементов LI 3x3 при загрузке страницы?

Question

Моя страница имеет <UL> с 9 <LI>s, которые отображаются в сетке 3x3. Я хотел бы знать, как анимировать эти элементы при загрузке страницы, чтобы они строили по 1 за раз, летя из центра сетки.

Кто-нибудь знает какие-либо учебные пособия или примеры по вышеприведенной идее?

Спасибо

Answer 1

Есть два способа сделать это.Во-первых, с использованием переходов CSS3, в которых вам нужно применить какой-то триггер (например, добавление имени класса с помощью javascript).

Вот скрипта JS: http://jsfiddle.net/VnrcJ/

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

Вот JS Fiddle: http://jsfiddle.net/zT7jS/

Очевидно, вы захотите использовать все комбинации префиксов браузера, я только использовал -webkit- в скрипках