Сьогодні мова піде про таку загадкову тему, як анімація. В наш час вона як ніколи актуальна, адже сучасні інтерфейси вимагають високого ступеня інтерактивності та простоти, чого якраз і можна досягти за допомогою грамотної CSS-анімації.
Анімація в CSS3
Анімація - це плавний перехід елемента з одного стану в інший з плином часу. І задати таку зміну тепер можна прямо в файлі CSS. Якщо раніше доводилося для досягнення цієї мети писати доволі громіздкий код JavaScript (плюс цього методу в тому, що дана анімація буде працювати кросбраузерно, тобто однаково в усіх браузерах), то зараз ми можемо описати анімацію в кількох правилах CSS.
Що таке кейфрейм (keyframe)?
Для того, щоб анімація працювала, необхідно використовувати так звані кейфрейми (keyframes) - "ключові кадри", у перекладі з англійської.
Кейфрейм дозволяє визначити положення (стан) елемента в певний момент часу, кадра. Саме тому елемент стає анімованим, а створення кейфреймів - важлива частина в створенні анімації.
Як?
Анімація в CSS створюється в два етапи: створення кейфреймів (keyframes) і використання їх у правилі.
Давайте розберемо по порядку.
Щоб створити кейфрейм, необхідно прописати наступну конструкцію в CSS:
Всередині фігурних дужок ми, буквально, прописуємо будь-яку зміну елемента, тобто описуємо дію кейфрейма. За допомогою ключових слів і ми даємо браузеру зрозуміти, з якої властивості ми починаємо анімацію і якою властивістю ми її завершимо.
Після ключових слів і ми ставимо фігурні дужки (відкриваючі та закриваючі, само собою). Саме тут і починається вся магія. У тілі ми прописуємо властивості, які визначають елемент до анімації, а в тілі - після анімації. Все просто.
Наприклад, якщо ми хочемо перемістити елемент вправо з 50px на 450px, то наш код буде таким:
Варто зазначити, що це лише пів справи. Щоб анімація запрацювала, необхідно прив'язати створений кейфрейм до селектора, який буде підпорядковуватися цим змінам. Дозволять нам зв'язати анімацію і елемент властивості animation-name і animation-duration, які встановлюють, якому кейфрейму буде відповідати даний елемент і скільки часу займе анімація.
Припустімо, ми хочемо застосувати цей ефект до блоку (який, звісно, заздалегідь прописаний у розмітці). Тоді код стилів виглядатиме таким чином:
Підсумок
Анімація CSS3 - доволі гнучкий і потужний інструмент, який здатний зробити будь-яку статичну сторінку красивою , наповненою рухом і ефектами. Звісно, нам належить познайомитися з великою кількістю налаштувань, тому - до зустрічі в наступній частині статті.
А тим часом, удачі вам у веб-розробках !