Анимация CSS: легко и просто

Анимация CSS: легко и просто

От автора: Анимация CSS – великолепный способ улучшить вид веб-страницы при сравнительно небольших усилиях. В своей последней странице Windows Beta release мы воспользовались анимацией для того, чтобы оживить свои дизайнерские закорючки. Затем выпустили Papers 3 для Windows и создали множество страниц с изящной анимацией.

Мы извлекли для вас CSS и расшарили его в этом хранилище на GitHub: mekentosj/blog-windows-animations.

Вот как в формате gif выглядит окончательный результат. Анимация слегка замедлена, чтобы было видно, что происходит:

Если хотите сделать нечто подобное, прочтите далее о свойствах преобразования CSS. Мы подробно расскажем вам о rotate() и translate().

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Анимация отдельного свойства

Первое, что мы анимировали – это скользящий книзу страницы логотип библиотеки Papers. Рассмотрим его CSS:

Абсолютное позиционирование применяется для того, чтобы можно было установить местоположение элемента при загрузке страницы, а затем он контролируется анимацией 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:

Чтобы передвинуть элемент по горизонтали или вертикали, транслируйте его по оси X или Y. В данном случае мы перемещаем библиотеку сверху вниз по странице с помощью translateY.

Множественная анимация

К сожалению, при употреблении вышеописанного метода нельзя применить к одному элементу сразу две анимации, однако в нескольких областях страницы нам пришлось это сделать.

Хорошим примером множественной анимации CSS, примененной к одному элементу, является большое облако слева. Нам нужно, чтобы облако медленно появлялось и двигалось к библиотеке, а затем неопределенное количество времени слегка колебалось туда-сюда.

Первая анимация под названием clouds-left применена к div’у. При постепенном увеличении непрозрачности облако волшебным образом появляется на экране, одновременно сдвигаясь по оси X (вправо).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вторая анимация применяется прямиком к тэгу изображения и запускается через шесть секунд после первой анимации – в данном случае показатель времени относителен к задержке, а не длительности анимации. Чтобы узнать, почему, читайте дальше.

Облако колышется туда-сюда: анимация продолжает выполняться, так как мы в стенографии длительности задали infinite.

Вращение элементов

Кроме того, элементы можно вращать: например, кран над логотипом Papers двигается слева направо, как маятник. В данном случае мы воспользовались rotate() с transform-origin. Эти два свойства фиксируют кран на оси X (0), в то же время позволяя ему вращаться только по оси Y (50%).

Если скачать пример с 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 оказался удивительно простым. Для создания фигур с углами в нем используются рамки:

Ресурсы

Отличное место для того, чтобы научиться работать с анимацией – это Treehouse, где имеется прекрасный блок об анимации CSS. Это – часть курса CSS Foundation. Введение в анимацию CSS также есть в сети разработчиков Mozilla Developer Network: Применение анимации CSS (Using CSS animations).

Автор: Erica Salvaneschi

Источник: www.blog.papersapp.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. BECEJLBE

    Отличный материал!

  2. Сергей

    Первый раз столкнулся с такой темой, поэтому пока сказать ничего не могу. Но очень интересно.

    Хотя есть вопрос: не по этому ли принципу работает слайдер?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree