Чи не найпростіший спосіб організувати анімацію елементів на сайті — скористатись параметром transition CSS. Ховери, виїзд субменю тощо.
Аби параметр зчитувався в різних браузерах використовують 5 варіантів запису. Інспектуючи код в реальному часі можна побачити, який з записів задаватиме стиль для Вашого браузера, решта — будуть закресленими.
{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Якщо розібрати параметри, то all — вид параметру, який підлягатиме зміні. Замість нього можна задавати конкретний параметр: height, color, background тощо визначаючи для кожного різні налаштування зміни.
0.5s — тривалість анімації. Задається в секундах.
ease-in-out — вид динаміки коли анімація починається і закінчується повільно. Нижче подані інші варіанти динаміки.
Окрім того, може бути присутній четвертий параметр — затримка. Він задається ідентично тривалості.
При вивченні тегів знайшла таку цікаву річ як , де можна задати певну дію щодо зображення (анімація чомусь викликає зразу асоціацію або з мультфільмом, або малюнком у форматі GIF – в контексті завдання – що мається на увазі?..), наприклад – hover, opacity. Але ж завдання стосується css – пробую там щось намалювати згідно інструкцій – нічого не відображається, й не “перекочується”. через php все ок.
В даному випадку анімація це узагальнення і стосується не лише картинок. Це можуть бути як випадаючи списки меню, так і поведінка об’єкту при наведенні на нього.
Використовуючи псевдоклас :hover можна вже задавати мінімальну інтерактивність, маніпулюючи зміною кольору, фону, прозорості. transition нам стає в нагоді для плавності рухів.