Блог Ярослава Перелигіна
Ось, як це прописується:
А ось, як це виглядає:
Можна також зробити, щоб блок при наведенні на нього, крім кольору фону і кольору тексту, міняв також і ширину. Для цього запишемо CSS код так:
Ось, як це буде виглядати в даному випадку:
Все б нічого, але, як бачите, властивості змінюють свої значення занадто різко, в ту ж мить, і це виглядає не дуже красиво. Що робити? Все дуже просто: використовуємо властивість CSS transition.
Про властивості transition
Властивість transition надає переходу від одних стилів до інших плавність. Наприклад, колір блоку при наведенні на нього мишкою зміниться не різко, а протягом певного часу. Transition, до речі, в перекладі на російську означає «перехід». Властивість має наступний запис:
Замість зазначених значень природно можна застосувати і інші. Більшість браузерів досі не сприймають дане властивість в його стандартному вигляді, тому необхідно використовувати префікси.
У прикладах було вказано короткий варіант запису, детальний має наступний вигляд:
У transition-property задається властивість, на яке буде поширюватися дія переходу. Наприклад: color, background-color, width, height, left, opacity, visibility і багато інших. Можна вказати кілька властивостей через кому. Якщо ви хочете застосувати перехід відразу для всіх можливих властивостей, тоді у transition-property слід вказати значення all. У transition-duration вказується час, протягом якого буде здійснюватися перехід, в transition-delay час, через яке перехід почнеться. У transition-timing-function вказується тип переходу, на цій властивості зупинимося докладніше.
Властивість transition-timing-function визначає, як будуть змінюватися проміжні значення протягом переходу, іншими словами, як буде змінюватися швидкість переходу протягом часу, який задано в властивості transition-duration. Наприклад, перехід може початися швидко, але під кінець сповільнитися, або ж не міняти своєї швидкості протягом усього часу. Transition-timing-function може мати наступні значення:
- linear - швидкість переходу не змінюється від початку і до кінця. Еквівалентна cubic-bezier (0,0,1,1).
- ease - повільний старт, потім прискорення і уповільнення в кінці. Еквівалентна cubic-bezier (0.25,0.1,0.25,1).
- ease-in - повільний старт. Еквівалентна cubic-bezier (0.42,0,1,1).
- ease-out - уповільнення в кінці. Еквівалентна cubic-bezier (0,0,0.58,1).
- ease-in-out - повільний старт і фініш. Еквівалентна cubic-bezier (0.42,0,0.58,1).
- cubic-bezier (n, n, n, n) - дозволяє задати власні значення від 0 до 1.
Наведіть на наступний блок мишкою і подивіться самі, як здійснюється перехід при тій чи іншій функції.
Як бачите, в залежності від того, яке значення має властивість transition-timing-function, перехід може здійснюватися абсолютно по-різному. Хоча іноді ця різниця є не дуже помітною, наприклад, якщо в transition-duration задано невелике тимчасове значення, або блок, для якого здійснюється ефект, має маленькі габарити і так далі.
Приклади використання властивості transition
Щоб вам легше було розібратися, як правильно застосовувати властивість transition, наведу кілька прикладів. Почну, мабуть, з самого простого. Пам'ятайте блок з мінливою шириною і кольором при наведенні на нього на самому початку посту? Давайте тепер зробимо те ж саме тільки з використанням властивості transition.
Приклад 1.
У прикладі була застосована лінійна функція, далі в пості буду використовувати саме її. Ви ж природно можете застосовувати абсолютно будь-яку. У transition-property було використано значення all, тобто всі можливі властивості, а саме колір фону, колір тексту і ширина, міняли свої значення протягом однакового часу і з використанням однієї і тієї ж функції. Щоб кожне властивість змінювалося по-різному, потрібно прописувати їх через кому з різними значеннями. Ось так:
В даному випадку все властивості міняли свої значення по черзі, починаючи з кольору фону і закінчуючи шириною. У кожного властивості була задана своя функція.
Приклад 2.
З квітами та розмірами розібралися. Тепер давайте зробимо зникаючий в русі блок.
За допомогою властивостей opacity і margin-left блок рухається і зникає протягом двох секунд.
Приклад 3.
Ще один простий приклад. На цей раз у тексту з'являється тінь білого кольору, хоча в даному випадку вона нагадує скоріше підсвічування, ніж тінь, але властивість називається саме так.
Реалізували ми це за допомогою властивості text-shadow.
Приклад 4.
Трохи ускладнити завдання, змусимо блок крутитися.
Для реалізації цього прикладу потрібно було всього лише збільшити значення ширини і висоти в блоці з псевдоклас: active.
Способів використання властивості CSS transition насправді дуже і дуже багато, впевнений, в майбутньому їх стане ще більше. Я навів лише найпростіші приклади, щоб продемонструвати transition в дії. Посилання, до речі, на моєму блозі змінюють свій колір при наведенні на них мишкою саме за допомогою нього. Думаю, я вам набрид сірим прямокутником, але зате на ньому вдалося відмінно показати все, що я хотів. У поєднанні з іншими властивостями і графікою transition може витворяти дуже красиві речі. Пробуйте!
Поділися з друзями: