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

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

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

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

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

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

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

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

.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:

@keyframes slide-library {
  100% { transform: translateY(19em); }
}

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

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

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

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

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

animation: clouds-left 3s ease-out 1.5s forwards;

@keyframes clouds-left {
  20% { opacity: 1; }
  100%  { opacity: 1; transform: translateX(8em); }
}

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

.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%).

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

.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.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

  1. BECEJLBE

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

  2. Сергей

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree