Анімація css - робота фотоапарата

Анімованих елементів на сторінці стає все більше. Багато розміщують на своїх сайтах Flash банери, але це не найкращий вихід. Тому що з розвитком технології CSS, ми можемо створювати анімацію без використання JS і не вдаючись в Flash. Це дозволяє робити нам анімація CSS. Якщо Ви все ще сумніваєтеся в її можливостях, тоді дочитайте до кінця цю статтю.

Як завжди, необхідно починати вивчення з самих азів. Рекомендую вивчити принцип створення анімації CSS на простому прикладі. Ось ця стаття:

• CSS3 анімація для початківців

Крім анімації з ключовими кадрами також є анімація CSS за допомогою перетворень. Вона трохи легше і не так громіздко виглядає. Ось уроки по цій темі:

Відео: CSS анімація елементів при наведенні

• Анімація за допомогою CSS перетворень. Частина 1 - введення
• Анімація за допомогою CSS перетворень. Частина 2 - реальний приклад
• Анімація за допомогою CSS перетворень. Частина 3 - просунута анімація

Для початку погляньте на приклад CSS анімації:

Подивитися прімерСкачать

Останній кадр анімації виглядає наступним чином:

Анімація CSS - розбираємо «по кісточках»

HTML частина анімації

Почнемо зі структури документа. Нічого додатково підключати не потрібно. Тільки файл стилів, в якому у нас буде інформація про ключових кадрах. Ось весь код HTML:

12345

lt;div class="Wrapper"gt;lt;div class="PhotoBg"gt;lt;div class="PhotoFlash"gt; lt;/divgt;lt;/divgt;lt;/divgt;

Детально пройдемося по кожному блоку:

• Блок з класом wrapper - це контейнер, в якому знаходяться блок із зображенням. Він необхідний для повороту зображення і обрізання зайвих частин при збільшенні.
• Блок з класом photoBg - цей блок містить зображення на тлі.
• Блок з класом photoFlash - блок, який потрібен для анімації спалаху.

CSS частина анімації

Відео: Animate.CSS + анімація при прокручуванні

Відразу попереджаю: я буду розбирати код без префіксів (префікси це приставки, які використовуються виробниками браузерів для експериментальних CSS-властивостей). Інакше доведеться приводити в приклад дуже великі частини коду.

Почнемо розглядати з першого контейнера, в якому все знаходиться:

123456789

.wrapper {margin-top:15%- / * Відступ зверху * /width: 100%- / * Ширина контейнера займає всю ширину блоку-батька * /min-width: 800px- / * Ширина не повинна ставати менш 800px * /overflow: hidden-/ * Все що за межами цього блоку - # 34-обрізаємо # 34- * /animation: rotateBlock 9s linear infinite- / * Задаємо анімацію для цього блоку * /transform:rotate(-15deg)- / * Повертаємо на 15 градусів проти годинникової * /border:30px solid # F28510- / * Кордон для блоку * /}

Я все властивості прокоментував, але хочу докладніше розглянути ось це властивість:

1

animation: rotateBlock 9s linear infinite-

Це властивість відповідає за анімацію і прив`язку ключових кадрів анімації CSS. Що значить кожне з цих значень:

• rotateBlock - довільне назву ключових кадрів анімації (див. Нижче).
• 9s - тривалість анімації.
• linear - швидкість зміни анімації.
• infinite - кількість повторень анімації. Infinite - нескінченно.

Перейдемо до ключових кадрів цієї анімації. Анімацію ми назвали "RotateBlock", тому зараз визначимо ключові кадри анімації:

123456

@keyframes rotateBlock {0% {transform:rotate(0)- border:0 solid # F28510-}62% {transform:rotate(0)- background-position: -20px -120px- border:0 solid # F28510-}65% {transform:rotate(-15deg)- border:30px double # F28510-}100% {transform:rotate(-15deg)-}}

Як бачите, тут у нас 4 ключових кадру анімації CSS для цього блоку. Давайте подивимося що на кожному ключовому кадрі відбувається:

• 0% - початок анімації, тому всі властивості "Скидаємо" і бачимо блок без повороту і без рамки.
• 62% - поки все ще рано повертати і задавати кордон, а трохи зміщуємо фон.
• 65% - повертаємо блок на 15 градусів проти годинникової стрілки і додаємо кордон.
• 100% - вказуємо що до кінця анімації блок повинен бути під кутом.

Ми розглянули основний блок. Давайте подивимося на блок із зображенням та те, що з цим зображенням відбувається:

123456789101112

.photoBg {background: url(../images/background-image.jpg) no-repeat- / * Адреса зображення * /background-position: -20px -120px- / * Кінцеве положення фонового зображення * /background-size: cover- / * Розтягуємо фонове зображення пропорційно блоку * /width:100%- / * Блок по ширині розтягується на всю ширину блоку-батька * /min-width: 600px- / * Мінімальна ширина 600px * /padding-bottom:50%- / * Маленька хитрість: по висоті цей блок повинен бути пропорційний зображенню * /position:relative- / * Необхідно для подальшого абсолютного позиціонування блоку # 34-photoFlash # 34- * /overflow: hidden- / * Обрізаємо все за межами це блоку, тому що зображення буде збільшуватися і зміщуватися * /animation: scaleIn 9s linear infinite- / * Задаємо анімацію * /transform:scale(3)- / * Кінцеве збільшення блоку * /}

Відео: CSS Анімація за 6 хвилин. Animation при наведенні в CSS3 / HTML

Все також прокоментовано. Зараз давайте подивимося на ключові кадри цієї анімації:

Відео: Уроки по CSS / CSS3. Частина 19. Анімація (animation)

12345678

@keyframes scaleIn {0% {transform:scale(1)-background-position: 0 0-}20% {transform:scale(2)-background-position: 100px 20px-}40% {transform:scale(1.7)-background-position: -50px -50px-}60% {transform:scale(3)-background-position: -20px -120px-}90% {transform:scale(3)-background-position: -20px -120px-}100% {transform:scale(3)-background-position: -20px -120px-}}

Все побудовано на тому, що блок іноді збільшується і фонове зображення зміщується:

• 0% - ніякого зміщення і збільшення немає.
• 20% - зміщуємо на 100px вправо і на 20px вниз, а також збільшуємо.
• 40% - зміщуємо на 50px вліво і на 50px вгору, трохи зменшуємо.
• 60% - зміщуємо на 20px вліво і на 120px вгору, збільшуємо.
• 90% - залишаємо той же стан (необов`язково).
• 100% - кінцеве положення.

Добре, з найскладнішими речами ми розібралися. Зараз давайте розглянемо як з`являється спалах. Ось стилі для цього блоку:

12345678910

.photoFlash {position:absolute- / * Абсолютне позиціонування щодо блоку-батька (блок # 34-photoBg # 34-) * /top:0- / * Розташування по вертикалі - притиснутий до верху * /left:0- / * Розташування по горизонталі - притиснутий до лівої сторони * /width: 100%- / * Ширина блоку - на всю ширину блоку-батька * /height: 100%- / * Висота блоку - на всю висоту блоку-батька * /background: #fff- / * Фон - білий колір * /animation: flashAnimation 9s linear infinite- / * Анімація спалаху * /opacity: 0- / * Прозорість * /}

А зараз ключові кадри:

12345

@keyframes flashAnimation {60% {opacity: 0}61% {opacity: 1}62% {opacity: 0}}

Тут блок повинен з`явитися і прірву. При цьому все це повинно відбуватися досить швидко. Давайте подивимося по ключовим кадрам:

• 60% - прозорість блоку 0%, тобто його не видно.
• 61% - прозорість блоку 100%. Він повністю з`явився.
• 62% - прозорість блоку 0, тобто він знову пропадає.

Давайте порахуємо в секундах, за скільки відбувається спалах. Якщо вся анімація триває 9 секунд, а тут все відбувається за 2%, то отримуємо 0.18 секунди. Швидко? Але це ж спалах ... # 128578;

висновок

Цікава анімація вийшло, правда? Це не flash, який може бути заблокований плагінами в браузерах і завантажується досить швидше. Виглядає він так само, як звичайний Flash.

Хтось може сказати, що не всі браузери добре розуміють дані властивості - і буде правий, але технології розвиваються!

P.S. Банер, який Ви бачите нижче, над коментарями зроблений на чистому CSS.

Успіхів!

З повагою, Юрій Німець