Анімація за допомогою css перетворень. Частина 1 - введення

CSS3 дуже потужна технологія. Я думаю ви знаєте про те, що за допомогою CSS3 можна створювати анімацію без використання javascript. Потрібно лише знання HTML і CSS3. Адже це класно, чи не так? Ви напевно думаєте що це складна справа - анімації на CSS3 і ви навіть не хочете братися за це. Тоді подивіться цей урок і ви зрозумієте, що створення анімацій на CSS це не дуже важка робота. Це перший урок з циклу присвяченому анімації за допомогою CSS змін. Ви на прикладі переконайтеся що нічого складного і страшного тут немає.

Приклади будуть працювати в браузерах Firefox, Chrome, Safari і Internet Explorer 10. На жаль, в старих браузерах ви не побачите цих ефектів і перетворень, або ж перетворення відбуватимуться без анімації.

Анімації, які ви побачите в цьому циклі уроків реагуватимуть на якусь подію, наприклад, наведення курсору миші. Тобто при наведенні викликається відповідна функція і протягом заданого проміжку часу відбувається перетворення.

Браузери Firefox і Opera підтримують зараз перетворення із майже ідентичним синтаксисом. Потрібно лише використовувати відповідні префікси -moz-, -o- і -webkit-.

Internet Explorer 10-й версії підтримує властивості переходів без префікса. Але для превью версії IE10 потрібно використовувати префікс -ms-.

Для того, щоб у всіх сучасних браузерах працювали переходи, потрібно використовувати такі префікси:

• -webkit-transition
• -moz-transition
• transition

А для перетворень:

• -webkit-transition
• -moz-transition
• -ms-transition
• transition

Відео: Основи CSS-анімації (частина 1)

Ми опустили префікс -o, тому що тепер Opera розпізнає webkit властивості.

статичні перетворення

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

Це легко продемонструвати в наступному прикладі:

Ось вихідний код цих блоків:

1234

lt;div class="Showbox" style="Transform: translate (-1.3em, -1em) - border-color: # E173C5;"gt; Блок 1lt;/divgt;lt;div class="Showbox" style="Transform: rotate (45deg) - border-color: # 0C09E1;"gt; Блок 2lt;/divgt;lt;div class="Showbox" style="Transform: translate (2em, 0) -border-color: # 04C71B;"gt; Блок 3lt;/divgt;lt;div class="Showbox" style="Transform: scale (2) - border-color: # C71729;"gt; Блок 4lt;/divgt;

А ось їх стилі:

Відео: CSS уроки. Анімація в CSS3. Частина 2

12345678910

.showbox {float: left-margin: 4em 1em-width: 100px-height: 60px-border: 2px solid-background-color: #fff-line-height: 60px-text-align: center-}

Невелике пояснення яке властивість що робить:

З причини того, що не у всіх користувачів можуть бути встановлені останні версії браузерів, я нижче зробив скріншот того, як повинні виглядати блоки вище (якщо ваш браузер підтримує перетворення CSS3):

Відео: Демо 1 для уроку по 3D перетворень і анімації на CSS

Відео: Основи CSS-анімації (частина 8)

висновок

Це перший урок з цього циклу. Тут ми розглянули самі основи, з яких можна почати вивчення анімації на CSS3. Щоб краще запам`ятати та зрозуміти роботу цих властивостей - Я рекомендую вам вручну написати їх. Слідкуйте на оновленнями сайту і підписуйтесь через форму нижче! # 128578;

Якщо виникнуть запитання - пишіть в коментарях, обов`язково розберемося!

В наступній частині розглянемо анімацію на реальних прикладах.

Успіхів!

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