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

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

Попередні уроки із серії «Анімація за допомогою CSS перетворень» ви знайдете за наступними посиланнями:

• Анімація за допомогою CSS перетворень. Частина 1 - введення
• Анімація за допомогою CSS перетворень. Частина 2 - реальний приклад

Приклади будуть коректно працювати в браузерах Firefox, Chrome, Safari і Internet Explorer 10.

Також нагадую, що анімації працюють тільки при наведенні !!!

Сьогодні ми підемо далі і розглянемо функції синхронізації, а також як можна «впливати» на один елемент за допомогою наведення на інший елемент.

функції синхронізації

У цьому прикладі ми розглянемо 4 різних переходу з 4-ма різними функціями синхронізації.

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

Для тих, хто ще не перейшов на новий браузер невелике відео:

У розташуванні блоків в HTML немає нічого незвичайного:

123

lt;div id="Stage"gt; Фонlt;div id="Block"gt; Блокlt;/divgt;lt;/divgt;

А ось на CSS необхідно трохи зупинитися і уважно подивитися:

1234567891011121314151617181920212223242526272829

#stage {background: none repeat scroll 0 0 #efefef-height: 300px-margin: 0 auto-position: relative-width: 400px-}/ * Початкове значення блока * /#block {background: none repeat scroll 0 0 # 00f-color: #fff-height: 100px-left: 0-position: absolute-top: 0-/ * Зверніть увагу на властивість нижче * /transition: left 2s ease-out 0s, top 2s ease-in 0s, background 1s linear 0s, transform 1s ease-in-out 1s-width: 100px-}/ * Кінцеві значення блоку після анімації * /#stage: hover #block {background: none repeat scroll 0 0 red-left: 300px-top: 200px-transform: rotate(360deg)-}

Тут я хочу звернути увагу на властивість, яке я прокоментував в CSS:

На перший погляд це властивість може здатися вам дуже складним. Але давайте розіб`ємо його на 4 частини, як на зображенні вище.

Також ця властивість є скороченою формою наступний властивостей:

1234

transition-property: left, top, background, transform-transition-duration: 2s, 2s, 1s, 1s-transition-delay: 0s, 0s, 0s, 1s-transition-timing-function: ease, ease-out, ease-in, linear, ease-in-out-

Що ж ми зробили? А ось що: ми всі частини з кожного параметра (у нас їх чотири на зображенні вище) записали по порядку в властивості transition-property, transition-duration, transition-delay і transition-timing-function.

А зараз подивимося що ж це за властивості такі в які ми переписали всі ці параметри:

• transition-property - тут вказується властивість, яке буде змінюватися в процесі трансформації. У нашому випадку ми змінюємо положення блоку за допомогою властивостей left і top, за допомогою background ми змінюємо колір блоку і, нарешті, за допомогою transform ми перегортаємо блок (але вказуємо це трохи пізніше, а тут лише показовим що трансформація блоку буде).
• transition-duration - тут задаємо тривалість анімації.
• transition-delay - вказуємо час, через яке відбувається трансформація. Наприклад, блок в нашому прикладі обертається тільки через 1 секунду після того, як блок почав рухатися.
• transition-timing-function - тут потрібно задавати функції анімації. Про ці параметри можна написати дуже багато, але я скажу лише що, при кожному з наших параметрів (ease, ease-out, ease-in, linear і ease-in-out) Анімація відбувається з різною швидкістю.

Як впливати на елемент через елемент

Сподіваюся ви розібралися в тому, в який спосіб ми робили анімацію і поєднувати при цьому кілька властивостей. Тому рухаємося далі.

Трохи складним здається назва цієї частини статті, вам не здається? # 128578; . Але суть полягає в тому, щоб при наведенні на один елемент ми могли якимось чином «впливати» інший елемент.

При наведенні на перший блок - перший блок збільшується, а другий котиться вправо перетворюючись в коло. При наведенні на другий блок - він збільшується по ширині.

Переконайтеся в цьому самостійно нижче:

Щоб не образити тих, хто має браузери не підтримують технології CSS перетворень:

В HTML два блоки знаходяться на одному рівні:

1234

lt;div id="Stage3"gt;lt;div id="Box3"gt; Блок 1lt;/divgt;lt;div id="Box4"gt; Блок 2lt;/divgt;lt;/divgt;

В CSS є цікавий знак, який дозволяє зробити те, що ми задумали:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

/ * Фон * /# stage3 {background: none repeat scroll 0 0 #efefef-height: 100px-position: relative-text-align: right-}/ * Блок 1 - початкові властивості * /# box3 {background: none repeat scroll 0 0 red-border: 1px solid # 666-color: #fff-height: 100px-position: absolute-transition: all 1s ease-in-out 0s-width: 100px-}/ * Блок 1 - кінцеві властивості для анімації при наведенні * /# box3: hover {width: 600px-}/ * Блок 2 - початкові властивості * /# box4 {background: none repeat scroll 0 0 # 00f-border: 1px solid # 666-color: #fff-height: 100px-left: 120px-position: absolute-transition: all 1s ease-in-out 0s-width: 100px-}/ * Блок 2 - кінцеві властивості для анімації при наведенні * /# box4: hover {width: 500px-}/* Увага! Тут при наведенні на перший блок змінюється він, а також другий блок трансформується в коло * /# box3: hover + # box4 {background: none repeat scroll 0 0 # ff0-border-radius: 50px-color: # 000-left: 627px-transform: rotate(360deg)-}

Зверніть увагу на знак «+«, З допомогою якого ми можемо« зв`язати »два елементи на сторінці.

висновок

Цим уроком я хочу закінчити серію статей «Анімація за допомогою CSS перетворень». Обов`язково пройдіть попередні уроки (посилання є на початку статті). Зараз ви вже знайомі з тим, яким чином можна зробити анімацію використовуючи перетворення на CSS. Що ви будете вміти в подальшому залежить тільки від того, скільки часу ви присвятіть практиці при вивченні CSS перетворень. Адже за допомогою перетворень можна робити дійсно красиві і оригінальні ефекти на сайті.

Надалі я буду писати про анімації на CSS. Але та анімація буде значно складніше, ніж та, яку ми розглядали в Цими уроках!

При виникненні проблем - пишіть їх в коментарях. Тому що я розумію - тут не все так легко розібратися людині, яка не є професіоналом в цій області.

Успіхів!

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