368 Сегодня мы создадим элемент анимации загрузки, как на Facebook, используя основные свойства CSS3. Если вы знакомы с этой социальной сетью, то оцените, насколько похожа анимация.
Для создания желаемого эффекта мы будем использовать keyframes и скрипт prefix free от @LeaVerou, позволяющий использовать безпрефиксные свойства CSS3.
Конечно же анимация загрузки будет работать только в тех браузерах, где есть поддержка keyframes. Работа скрипта проверялась на последних версиях Firefox, Chrome и Safari.
Исходный код анимации очень прост.
|
1 2 3 4 5 6 |
<!-- Facebook Loader --> <div class="loader"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* FACEBOOK */ .loader { width:32px; height:32px; } /* Исходное состояние */ .bar { background-color:#99aaca; border:1px solid #96a6c9; float:left; margin-right:4px; margin-top:6px; width:6px; height:18px; /* Установка свойств анимации */ animation-duration: 1s; animation-iteration-count: infinite; animation-name: loadingbar; } /* Пауза между вторым и третьим блоком */ .loader .bar:nth-child(2) { animation-delay: 0.1s; } .loader .bar:nth-child(3) { animation-delay: 0.2s; } /* Анимация */ @keyframes loadingbar { 0% { } 10% { margin-top:5px; height:22px; border-color:#d1d8e6; background-color:#bac5db; } 20% { margin-top:0px; height:32px; border-color:#d1d7e2; background-color:#c6ccda; } 30% { margin-top:1px; height:30px; border-color:#d1d8e6; background-color:#bac5db; } 40% { margin-top:3px; height:26px; } 50% { margin-top:5px; height:22px; } 60% { margin-top:6px; height:18px; } 70% { } /* ... */ 100% { } } |
Вот и все! Напомним, что префиксы -webkit-, -moz- и т.д. мы не прописывали. Эту работу мы поручили скрипту prefix free.
Выводы
Хотя анимация и была сделана «на глаз», потому как точные значения framerate/speed не известны, но эффект все равно получился очень похожим на оригинал. А вы думаете можно сделать код еще проще?
