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

21

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

Ми зробили для вас CSS і расшарили його в цьому сховищі на GitHub: mekentosj/blog-windows-animations.

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

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

Якщо хочете зробити щось подібне, прочитайте далі про властивості перетворення 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.5 s 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/[email protected]»)

Бонус №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).