Css плавно змінюється фон background

Тема: CSS плавно змінюється фон background

Зробити плавно змінюється фон для background в CSS досить просто.
Давайте почнемо з найпростішого прикладу - додамо плавний перехід фону посилання.
Класична реалізація:

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

Тепер наш фон плавно змінює колір протягом півсекунди! Як і з іншими властивостями CSS, ми можемо об'єднати всі transition-властивості в одне:

• Xakker
• Developer Ext.
• неактивний
• подробиці

Re: CSS плавно змінюється фон background

Тепер додамо плавну зміну кольору шрифту:


Даний код при наведенні мишки буде плавно міняти колір фону протягом півсекунди і колір шрифту протягом 0.3 секунд. Якщо ж нам потрібні однакові властивості для всіх елементів, ми можемо замінити
-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на
-webkit-transition: all 0.5s ease;

Тепер Transition-ефект буде застосовуватися до всіх умов, що змінюються при подію свойст і з однаковими параметрами - 0.5 секунд, ease-ефект.

Так само, ми можемо додати затримку для ефекту:


Тепер наша анімація буде працювати через півсекунди після наведення мишки.

Застосовувати властивість transition можна до чого завгодно - фону, кольору, довжині, розміром шрифту і т.д. В основному це властивості, які визначають колір або властивості, які можуть бути виражені в одиницях довжини (px, em, ex) або у відсотках. Як події ми так само можемо використовувати псевдокласи: focus і: active. Взагалі - використовувати transition можна з будь-якими селекторами.