[Из песочницы] Простая анимация загрузки в Material Design (CSS3)
Доброго времени суток, уважаемые читатели Хабрахабра! Меня зовут Александр Шевченко, я начинающий веб-разработчик. Перейдём к делу. Анимации в CSS3 — давно не новинка. Однако, иногда можно сделать что-то простое эффектным. Сегодня мы по этому принципу создадим небольшую анимацию загрузки.
Шаг 1. Плавное появление самого экрана загрузки
Да-да. Перед тем, как приступить к основной части, мы сделаем анимацию появления самого экрана загрузки.
body { -webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards; -moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards; animation: body-opacity-change 1s ease-in-out 0s 1 forwards; opacity: 0; background-color: transparent; }/* WebKit (Safari и Chrome) */ @-webkit-keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } }/* Mozilla Firefox */ @-moz-keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; }}/* Общий синтаксис */ @keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } }
Читать дальше →
Шаг 1. Плавное появление самого экрана загрузки
Да-да. Перед тем, как приступить к основной части, мы сделаем анимацию появления самого экрана загрузки.
body { -webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards; -moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards; animation: body-opacity-change 1s ease-in-out 0s 1 forwards; opacity: 0; background-color: transparent; }/* WebKit (Safari и Chrome) */ @-webkit-keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } }/* Mozilla Firefox */ @-moz-keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; }}/* Общий синтаксис */ @keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } }
Читать дальше →
Источник:
0 Комментарии