От автора: Анимация CSS – великолепный способ улучшить вид веб-страницы при сравнительно небольших усилиях. В своей последней странице Windows Beta release мы воспользовались анимацией для того, чтобы оживить свои дизайнерские закорючки. Затем выпустили Papers 3 для Windows и создали множество страниц с изящной анимацией.
Мы извлекли для вас CSS и расшарили его в этом хранилище на GitHub: mekentosj/blog-windows-animations.
Вот как в формате gif выглядит окончательный результат. Анимация слегка замедлена, чтобы было видно, что происходит:
Если хотите сделать нечто подобное, прочтите далее о свойствах преобразования CSS. Мы подробно расскажем вам о rotate() и translate().
Анимация отдельного свойства
Первое, что мы анимировали – это скользящий книзу страницы логотип библиотеки Papers. Рассмотрим его CSS:
|
1 2 3 4 |
.library { position: absolute; animation: slide-library 4s ease-out .5s forwards; } |
Абсолютное позиционирование применяется для того, чтобы можно было установить местоположение элемента при загрузке страницы, а затем он контролируется анимацией slide-library. Свойство animation – это сокращение, способное установить сразу несколько свойств:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-direction
Анимация slide-library установлена на прокрутку в течение 4 секунд при задержке в 0,5 секунды. Задержка способствует усилению впечатления от анимации, делая более заметным первоначальное состояние страницы, а функция тайминга помогает анимации смотреться более естественно: ease-out означает, что к концу она слегка замедлится.
Возврат к первоначальному «доанимационному» состоянию по окончанию анимации – это нормальное поведение элемента. Опция forwards animation-direction позволяет библиотеке твердо удерживаться на своем месте.
Заставить элемент появиться из ниоткуда так же легко, как и спрятать его за div, переместив за пределы страницы или сменив непрозрачность. Вот как выглядит slide-library:
|
1 2 3 |
@keyframes slide-library { 100% { transform: translateY(19em); } } |
Чтобы передвинуть элемент по горизонтали или вертикали, транслируйте его по оси X или Y. В данном случае мы перемещаем библиотеку сверху вниз по странице с помощью translateY.
Множественная анимация
К сожалению, при употреблении вышеописанного метода нельзя применить к одному элементу сразу две анимации, однако в нескольких областях страницы нам пришлось это сделать.
Хорошим примером множественной анимации CSS, примененной к одному элементу, является большое облако слева. Нам нужно, чтобы облако медленно появлялось и двигалось к библиотеке, а затем неопределенное количество времени слегка колебалось туда-сюда.
Первая анимация под названием clouds-left применена к div’у. При постепенном увеличении непрозрачности облако волшебным образом появляется на экране, одновременно сдвигаясь по оси X (вправо).
|
1 2 3 4 5 6 |
animation: clouds-left 3s ease-out 1.5s forwards; @keyframes clouds-left { 20% { opacity: 1; } 100% { opacity: 1; transform: translateX(8em); } } |
Вторая анимация применяется прямиком к тэгу изображения и запускается через шесть секунд после первой анимации – в данном случае показатель времени относителен к задержке, а не длительности анимации. Чтобы узнать, почему, читайте дальше.
|
1 2 3 4 5 6 7 |
.big-cloud img { animation: rock-bigcloud 6s ease-in-out infinite; } @keyframes rock-bigcloud { 50% { transform: translateX(10px); } } |
Облако колышется туда-сюда: анимация продолжает выполняться, так как мы в стенографии длительности задали infinite.
Вращение элементов
Кроме того, элементы можно вращать: например, кран над логотипом Papers двигается слева направо, как маятник. В данном случае мы воспользовались rotate() с transform-origin. Эти два свойства фиксируют кран на оси X (0), в то же время позволяя ему вращаться только по оси Y (50%).
|
1 2 3 4 5 6 7 8 |
.crane { animation: rock-crane 3s ease-in-out 0s infinite; transform-origin: 50% 0; } @keyframes crane { 50% { transform: rotate(-6deg) } } |
Если скачать пример с mekentosj/blog-windows-animations, то можно поэкспериментировать с разными углами, воспользовавшись отрицательными и положительными значениями и процентами.
Заметка о вендорных префиксах
Если хотите, чтобы ваша анимация работала в большинстве браузеров, вам придется включить вендорные префиксы. Их применяют как к установкам анимации, так и ключевым кадрам. Вот эти префиксы:
-webkit: Chrome, iOS, Safari
-moz: Firefox
-o: Opera
-ms: Internet Explorer
Pleease поможет вам сгенерировать вендорные префиксы, так как при сложной анимации данный процесс может оказаться весьма утомительным.
Бонус №1: Retina.js
Многие разработчики желают оптимизировать свои веб-сайты к высокоплотным экранам (DPI). Конкретно Retina.js позволяет легко включать большие изображения путем помещения в проект retina.js, а затем помечать изображения атрибутом data-at2x, указывающим на высококачественное изображение:
img(src=»/img/logo.png», data-at2x=»/img/logo@2x.png”)
Бонус №2: создание фигур в CSS
Ведра на Papers для страницы Windows Beta полностью нарисованы в CSS. При огромном количество существующих великолепных учебников наш CSS оказался удивительно простым. Для создания фигур с углами в нем используются рамки:
|
1 2 3 4 5 6 7 8 9 10 |
.bucket { position: absolute; right: 0; bottom: 0; right: 80px; width: 10px; border-width: 13px 5px 0; border-style: solid; border-color: rgb(41, 123, 190) transparent; } |
Ресурсы
Отличное место для того, чтобы научиться работать с анимацией – это Treehouse, где имеется прекрасный блок об анимации CSS. Это – часть курса CSS Foundation. Введение в анимацию CSS также есть в сети разработчиков Mozilla Developer Network: Применение анимации CSS (Using CSS animations).
Автор: Erica Salvaneschi
Источник: www.blog.papersapp.com
Редакция: Команда webformyself.
Комментарии (2)