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

CSS3 анімація досить широко використовується. Прийшла пора розібратися навіть самим початківців сайтостроітеля що ж таке CSS анімація і як її створити. Можливо Ви думаєте що CSS3 анімація полягає в тому, щоб змусити рухатися блоки і це схоже на мультфільм. Але CSS анімація це не тільки переміщення елемента з однієї точки в іншу, а це ще спотворення і інші трансформації. Щоб це було зрозуміло навіть для початківців - я розписав все по кроках.

1. Основні властивості CSS3 анімації

Невеликий теоретичний блок, з якого Ви зрозумієте які властивості CSS3 відповідають за анімацію, а також які значення вони можуть приймати.

Тут знаходяться лише основні властивості, яких більш ніж достатньо, щоб створити свою першу анімацію на CSS3.

Останнє, що нам потрібно знати і розуміти з теорії - це те, як створювати ключові кадри. Це робити також легко та здійснюються за допомогою правила @keyframes, всередині якого вказуються ключові кадрі. Синтаксис цього правила наступний:

1234

@keyframes AnimationSitehere {from {/ * Властивості для початкового ключового кадру * /}to {/ * Властивості для коньячного ключового кадру * /}}

Вище ми задали перший і останній кадр. Всі проміжні стану розрахуються АВТОМАТИЧНО!

2. Реальний приклад анімації CSS3

Теорія як зазвичай нудна і не завжди зрозуміла. Набагато простіше побачити все на реальному прикладі, а найкраще зробити своїми руками на який-небудь тестової HTML сторінці.

При вивченні мови програмування зазвичай пишуть програму "Hello, world!", За якою можна зрозуміти який синтаксис в цього мови і ще якісь базові речі. Але ми вивчаємо не мова програмування, а мова опису зовнішнього вигляду документа. Тому у нас буде свій "Hello, world!".

Ось що ми зробимо для прикладу: нехай у нас який-небудь блок буде спочатку з шириною 800px та за 5 секунд зменшиться до 100px.

Начебто все зрозуміло - просто потрібно стиснути блок і все! Давайте подивимося як це виглядає насправді.

Спочатку HTML розмітка. Вона дуже проста, тому що ми працюємо тільки з одним елементом на сторінці.

1

lt;div class="ToSmallWidth"gt; lt;/divgt;

А ось що знаходиться в файлі стилів:

12345678910111213141516171819202122

.toSmallWidth {margin:20px auto- / * Зовнішні відступи зверху і знизу по 20px і вирівнювання по середині * /background: red- / * Червоний фон у блоку * /height: 100px- / * Висота блоку 100px * /width: 800px- / * Початкова ширина 800px * /-webkit-animation-name:animWidthSitehere- / * Властивість з префіксом для браузерів Chrome, Safari, Opera * /-webkit-animation-duration:5s- / * Властивість з префіксом для браузерів Chrome, Safari, Opera * /animation-name:animWidthSitehere- / * Вказуємо назву ключових кадрів (знаходяться нижче) * /animation-duration: 5s- / * Задаємо тривалість анімації * /}/ * Ключові кадри з префіксом для браузерів Chrome, Safari, Opera * /@ -webkit-keyframes animWidthSitehere {from {width: 800px-}to {width: 100px-}}@keyframes animWidthSitehere {from {width: 800px-} / * Перший ключовий кадр, де ширина блоку 800px * /to {width: 100px-} / * Останній ключовий кадр, де ширина блоку 100px * /}

Дивіться приклад

Як бачите, ми вказали тільки перший і останній ключовий кадр, а всі проміжні "вишикувалися" автоматично.

Ось і готова Ваша перша CSS3 анімація. Щоб закріпити отримані знання - створіть HTML документ і CSS файл, і там вставте (а краще руками надрукуйте) код з прикладу. Тоді Ви точно все зрозумієте. Потім спробуйте зробити те ж саме з висотою блоку (він повинен зменшуватися по висотою), щоб закріпити матеріал.

3. Приклади анімації CSS3 складніше

Вище Ви дізналися як можна легко створити CSS3 анімацію. Якщо спробували своїми руками це зробити, то вже зрозуміли весь процес і зараз хочете довідатися якомога створити більш складну і красиву анімацію. А її зробити справді можна. Нижче є 3 уроки де анімація створюється також, як в прикладі вище.

Уроки допоможуть Вам зрозуміти анімацію CSS ще краще. Головне - це пробувати повторювати те, що Ви бачите в уроках. Або хоча б спробуйте змінювати значення властивостей і дивитися що виходить, тоді Ви станете менше бояться CSS.

4. Для ледачих - сервіс генерації анімації

Щоб розуміти як працює анімація на CSS3, Ви просто зобов`язані розібратися з прикладом на початку статті. Але якщо Вам лінь писати код вручну - завжди можна знайти вихід. В даному випадку вихід - це використання генератора анімації CSS3. Нижче є відео з використання цих генераторів, а ще нижче посилання на самі генератори.

висновок

Ще раз повторю і тут: спочатку розберіться з прикладом на початку статті, щоб Ви розуміли як будується анімація CSS3. Після чого Ви можете скористатися генератором і легко створити анімацію на свій розсуд. Я Вам рекомендую спочатку розібратися з прикладом, тому що коли Ви генератори не дозволяють створювати дуже «гнучкі» анімації, які Ви тільки побажаєте. Але якщо Ви знаєте як влаштований код, то з легкістю зможете дописати необхідні якості і отримати дуже крутий ефект в результаті.

Ще раз подивіться все по пунктах:

1. Основні властивості CSS3 анімації
2. Реальний приклад анімації CSS3
3. Приклади анімації CSS3 складніше
4. Для ледачих - сервіс генерації анімації

Якщо Вам сподобалася стаття, то Ви можете поділитися нею з друзями, клікнувши на одну з кнопок соціальних мереж нижче.

Успіхів!

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