Анімація в css3

Сьогодні розмова піде про таку загадкову темі, як анімація. У наш час вона як не можна більш актуальна, так як сучасні інтерфейси вимагають високого ступеня інтерактивності і простоти, чого якраз і можна досягти за допомогою грамотної CSS-анімації.

Анімація в CSS3

Що таке кейфрейм (keyframe)?

Для того, щоб анімація працювала необхідно використовувати так звані кейфрейми (keyframes) - "ключові кадри", в перекладі з англійської.

Кейфрейм дозволяє визначити положення (стан) елемента в певний момент часу, кадру. Саме тому елемент стає анімації, а створення кейфреймов - важлива частина у створенні анімації.

Анімація в CSS створюється в два етапи: створення кейфреймов (keyframes) і використання їх в правилі.

Давайте розберемо по порядку.

Щоб створити кейфрейм. необхідно прописати наступну конструкцію в CSS:

Усередині фігурних дужок ми, буквально, прописуємо будь-яка зміна елемента, тобто описуємо дію кейфрейма. За допомогою ключових слів from і to ми даємо браузеру зрозуміти, з якого властивості ми починаємо анімацію і яким властивістю ми її і закінчимо.

Після ключових слів from і to ми ставимо фігурні дужки (відкривають та закривають, само собою). Саме тут і починається вся магія. У тілі from ми прописуємо властивості, які визначають елеметов до анімації, а в тілі to - після анімації. Все просто.

Наприклад, якщо ми хочемо перемістити елемент вправо з 50px на 450px, то наш код буде таким:

Варто відзначити, що це тільки півсправи. Щоб анімація запрацювала, необхідно прив'язати створений кейфрейм до селектору, який буде підпорядковуватися цими змінами. Чи дозволять нам зв'язати анімацію і елемент властивості animation-name і animation-duration, які встановлюють, яким кейфрейму буде відповідати даний елемент і скільки часу займе анімація.

Припустимо, ми хочемо застосувати даний ефект до блоку .animate (який, звичайно ж, заздалегідь прописаний в розмітці). Тоді код стилів буде виглядати таким чином:

@keyframes m from left: 50px;
>
to left: 450px;
>
>
.animate width: 50px;
height: 50px;
animation-name: m;
animation-duration: 1.5s / * Після числа ми ставимо "s" (секунди) або "ms" (мілісекунди), в залежності від того, скільки часу буде потрібно на анімацію * /
>

Анімація CSS3 - досить гнучкий і потужний інструмент, який здатний зробити будь-яку статичну сторінку красивою. наповненою рухом і ефектами. Зрозуміло, нам належить познайомитися з великою кількістю налаштувань, тому - до зустрічі в наступній частині статті.

А тим часом, удачі вам в веб-розробках!