Анимация загрузки как на Facebook с помощью CSS3

Сегодня мы создадим элемент анимации загрузки, как на Facebook, используя основные свойства CSS3. Если вы знакомы с этой социальной сетью, то оцените, насколько похожа анимация.

Для создания желаемого эффекта мы будем использовать keyframes и скрипт prefix free от @LeaVerou, позволяющий использовать безпрефиксные свойства CSS3.

Пример Скачать

Конечно же анимация загрузки будет работать только в тех браузерах, где есть поддержка keyframes. Работа скрипта проверялась на последних версиях Firefox, Chrome и Safari.

Исходный код анимации очень прост.

Вот и все! Напомним, что префиксы -webkit-, -moz- и т.д. мы не прописывали. Эту работу мы поручили скрипту prefix free.

Выводы

Хотя анимация и была сделана «на глаз», потому как точные значения framerate/speed не известны, но эффект все равно получился очень похожим на оригинал. А вы думаете можно сделать код еще проще?


Оставить комментарий