Перехід всіх можливих станів

Д. Сідерхолм. «CSS3 для веб-дизайнерів»

Замість того щоб перераховувати кілька властивостей, до яких хочеться застосувати перехід, можна використовувати значення all. Тоді перехід буде накладено на всі можливі властивості.

Замінимо перерахування background і color на значення all. Тепер ці переходи отримають однакову тривалість і тимчасову функцію.

padding: 5px 10px; background: # 9c3;

-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;

a.foo: hover, a.foo: focus

Використання all - зручний спосіб відстежити всі зміни, що відбуваються в станах: hover. focus. active. який позбавляє від необхідності перераховувати кожне властивість, що потребує позначенні переходу.

Д. Сідерхолм. «CSS3 для веб-дизайнерів»

До яких властивостям застосуємо перехід

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

Д. Сідерхолм. «CSS3 для веб-дизайнерів»

Використовуйте з розумом

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

Тепер, коли ми заручилися міцними базовими знаннями про роботу CSS-переходів з технічної точки зору, ми можемо застосовувати їх для згладжування взаємодії в таких прикладах починаючи з наступного глави. Отже.