В створення анімації можна не тільки обмежуватися спеціальними програмами, а й скористатися наявними можливостями каскадної таблиці CSS3. Спираючись на знання і свою фантазію вимальовувати ефекти в CSS анімації без використання будь-яких доповнень. Тим більше CSS анімація - це хороший спосіб зробити враження на своїх користувачів при правильному її розміщенні. За допомогою анімації CSS можна змусити ворушитися практично всі, текст, картинку, довільні фігури і все інше що прийде на розум.
Для підтримки анімації усіма популярними браузерами застосовується нестандартне властивість, префікс. Воно позначається на початку рядка кожному браузеру окремо.
Internet Explorer 10 підтримує без префікса. Браузер Опера розпізнає префікс -webkit тому значення -o- можна не застосовувати.
Початковий кадр анімації.
За допомогою властивості @keyframes створюється початковий кадр анімації, який необхідно прив'язати до певного селектору. Потім вказати принаймні два дії:
- назва анімації
- тривалість анімації
Примітка: Якщо не вказана тривалість анімації, то ніяких дій не відбудеться оскільки по замовчування вона дорівнює нулю.
Як працює CSS анімація?
Анімація дає можливість переходити з одного стилю на інший при цьому плавно їх змінюючи. Змінити можна багато елементів, а головне - неодноразово, стільки раз скільки потрібно. Перехід анімації вказується в процентах від 0% до 100% або ж ключовими словами від «from» до «to».
Приклади анімації в логотипі.
Можливо, таке застосування нечасто зустрінеться в веб-дизайні хіба що за винятком в промо - роликів. Але досить буде цікавим для очей і може надихнути на бедующее створення логотипу.
