Плавні переходи в css3.

Всім здоров`я! У цій статті ми розберемо, як робити плавні переходи на CSS3, використовуючи властивість transition.

Давайте подумаємо, як зробити, щоб, наприклад, при наведенні на який-небудь блок, він міняв колір тексту, фону і тіні плавно? Думаю, що багато хто зараз скажуть, що без скриптів тут не обійтися, але це не так! На допомогу нам приходить властивість transition. Давайте поговоримо, які є параметри у цієї властивості.

transition-property: background- 
transition-duration:2s- 
transition-delay:1s- 
transition-timing-function: ease-

В transition-property ми повинні вказати, що саме ми хочемо анімувати. наприклад, background. Якщо ви хочете анімувати відразу все властивості css, то задайте значення all.

Відео: Уроки по CSS / CSS3. Частина 15. Плавні переходи (transition)

transition-duration задає час, яке буде тривати анімація. У нашому випадку 2 секунди.

transition-delay задає затримку перед анімацією. Тобто анімація відбудеться не відразу, а лише через 1 секунду в нашому випадку.

Відео: Уроки по CSS CSS3 Частина 15 Плавні переходи transition

Тепер поговоримо про transition-timing-function. Він може мати кілька значень:

linear - ефект, при якому анімація триватиме з однаковою швидкістю
ease - ефект, при якому анімація почнеться повільно, потім прискориться, а в кінці знову сповільниться
ease-in - ефект з уповільненим початком
ease-out - ефект з уповільненим кінцем
ease-in-out - ефект з уповільненим початком і кінцем
cubic-bezier (n, n, n, n) - тут можна вказати якісь свої значення від 0 до 1

Відео: css / css3 by Sorax

Щоб не расспісивать все так довго, є скорочена форма

transition: background 2s ease 1s-

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

Ми роздивились властивість transition і тепер давайте закріпимо наші знання на практиці. Для цього анімуємо div.

HTML розмітка

 




 
transition 
charset="Utf-8"gt; 
 
 
class="Block"gt;Кнопка клац!

Тепер задамо йому стилі, а потім я поясню

.block { 
 width:110px- 
 padding:15px3px- 
 background:# ccc- 
 color:# fff- 
 text-align: center- 
 border-radius:7px- 
 font:17px"Tahoma"- 
}

Ось, що у нас вийшло:

Тепер задамо стилі при наведенні

.block:hover { 
 background:# fafafa- 
 color:# ccc- 
 box-shadow:1px3px5px# ccc- 
}

блок при наведенні

Зараз стилі змінюються, але не плавно, а різко. Щоб це виправити, додамо тільки що вивчене властивість transition.

.block: hover { 
/ * ... стилі * / 
 transition: all .5s ease-in-out- 
}

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

Відео: Плавне прокручування. якоря

.block { / * ... стилі * / transition: all .5s ease-in-out-}

На цьому все для цієї статті. Обов`язково спробуйте придумати собі який-небудь приклад і зробити його, щоб закріпити знання, які ви отримали зараз. Успіхів!

Поділися в соціальних мережах:

Схожі