Нас нещодавно зацікавив простий візуальний ефект: при наведенні покажчика миші підкреслення з'являється з центру за допомогою анімації. Створити такий ефект на подив просто, не потрібно додавання додаткових елементів DOM в код HTML, і в старих версіях браузерів, які не підтримують анімації CSS, він буде виглядати нормально, як звичайне підкреслення. Можете побачити цей ефект нижче.
Після цього додамо кордон і сховаємо її за допомогою трансформації. Це робиться за допомогою установки цих властивостей псевдоелементу: before та завдання значення масштабу по осі X 0. Як обхідного шляху сховаємо ці властивості за допомогою visibility: hidden для браузерів, які не підтримують анімації CSS:
В самому кінці вкажемо елементу анімувати всі застосовувані до нього зміни зі значенням тривалості 0,3 секунди. Тепер, щоб анімація з'явилася, потрібно просто зробити елемент знову видимим при наведенні покажчика миші і задати значення масштабу по осі X 1:
І це все! Про всяк випадок в демонстрації роботи залишені приставки виробників для старих версій браузерів Firefox і Opera, але якщо Вам не потрібна підтримка старих версій, можете використовувати тільки властивості без приставок виробника і з приставкою виробника -webkit, як в коді CSS в тексті уроку.
Переклад - Вартівня