Від автора: всіх вітаю. Анімація стала одним з нововведень css3. І сьогодні я покажу вам, як робиться в css-анімація при наведенні на елемент. Я покажу всього 2 простих прикладу: з блоком м’ячем і пульсуючої кнопкою, але їх вам буде достатньо, щоб зрозуміти загальну суть. Я рекомендую вам всі приклади розбирати разом зі мною.
Отже, є м’яч і є газон. Завдання: змусити м’яч крутитися за годинниковою стрілкою при наведенні на нього. Це можна зробити і без анімації, але тоді буде тільки один прокрут. При анімації ж, якщо ви знаєте, можна керувати кількістю повторів і ще багатьма цікавими речами.
Я не буду зараз вдаватися в html-розмітку, там нічого говорити, тому відразу перейдемо до реалізації потрібного нам ефекту. Я нагадаю, потрібно робити нескінченний поворот м’яча при наведенні на нього. За поворот у нас в css відповідає властивість transform: rotate. Складаємо анімацію:
@keyframes ball{
0%{transform: rotate(0deg)}
100%{transform: rotate(360deg)}
}
Це робиться таким чином. Якщо ви раніше ніколи не робили анімацій в css, то коротко поясню. @keyframes – це як би обов’язкове ключове слово початку, говорить браузеру про те, що далі ми будемо писати анімаційні кадри. Далі я вказую довільно ім’я анімації, після чого слід вже її опис.
В описі ми вказуємо на яких моментах анімації що робити. Так, я вказав, що на самому початку елемент не потрібно повертати, а до повного завершення анімації він повинен бути повернений на 360 градусів.
Анімація складена, тепер вам треба її застосувати до самого елементу. Для цього я прописав м’ячу стильової клас ball і вказав у css:
animation-name: ball;
animation-duration: 1s;
animation-iteration-count: infinite;
Власне, в нашому випадку для працездатності анімації потрібно вказати її ім’я, тривалість і кількість повторів, оскільки їх має бути нескінченна кількість.
Але, увага! Всі ці правила потрібно вказати для селектора .ball:hover, адже ми розглядаємо анімацію при наведенні, а не просто так. Після всіх виконаних маніпуляцій поновіть сторінку і наведіть курсор на м’яч. Якщо він почав крутитися, то все зроблено правильно. Але це був трохи дивний приклад, який мені відразу прийшла в голову, зараз розглянемо більш наближений до реальності.
Пульсуючий кнопка
Ми зробимо кнопка, при наведенні на яку вона спочатку зростатиме, а потім зменшуватиметься. І так буде безкінечно, поки курсор знаходиться на неї.
Ось html-розмітка, нехай це буде кнопка відправки форми, хоча смішно виходить, адже самої форми немає, але нам тільки для прикладу. Пропишемо для неї які-небудь стилі css, щоб вона виглядала більш-менш нормально:
input[type=submit]{
margin: 20px 50px;
background: #2E5C8A;
border: 2px solid #1C4354;
padding: 25px;
color: #fff;
font-weight: bold;
}
Ось так вона виглядає:
Не шикарно, але для прикладу піде. Тепер створюємо для неї анімацію, дивіться код:
@keyframes button{
50%{transform: scale(1.5, 1.5)}
100%{transform: scale(0.75, 0.75)}
}
За керування розмірами відповідає transform: scale. Перше значення відповідає за ширину, друге відповідно за висоту. В даному коді зрозуміло, що на половині анімації кнопка повинна збільшитися в півтора рази, але до кінця навпаки зменшитися.
Залишається зв’язати анімацію з кнопкою:
input[type=submit]:hover{
animation-name: button;
animation-duration: 1s;
animation-iteration-count: infinite;
}
Знову ж, не забувайте дописувати псевдоклас: hover, тому що ми розглядаємо саме анімацію при наведенні на кнопку. Все, тепер оновлюємо сторінку і при наведенні на кнопку вона пульсує. Все працює. Більш складний приклад
Отже, ми розглянули 2 простих прикладу, але зараз я хочу в якості бонусу показати вам ще один приклад. Він не зовсім пов’язаний з наведенням, ми зробимо залежність анімації від чекбоксов.
Я пропоную реалізувати такий цікавий приклад: буде три жаби і три чекбокса, а також пропозицію вибрати, яку жабу надіслати за екран. Відповідно, якщо ви відзначите першу галочку, то полетить перша жаба і т. д. Я раджу вам прямо зараз відкрити редактор коду і самому спробувати на практиці, тому що так ви набагато швидше зрозумієте, як воно працює.
Все це насправді не так складно, як вам могло здатися. Ось повний код прикладу:
Виберіть, який жабі потрібно зістрибнути з монітора:
Першої
Другий
Третьої
Відповідно, кожен чекбокс отримує свій клас, те ж саме вірно і для зображень. Тепер потрібно підготувати саму анімацію:
@keyframes jump{
100%{transform: translate(1500px, -150px)}
}
Як бачите, вона зовсім проста, тут тільки переміщення по горизонталі і вертикалі ходжу по всій анімації. А тепер найголовніше. Як же зробити так, щоб при натисканні на перший чекбокс перша жаба виконувала зазначену анімацію і т. д.? Дивіться код:
.c1:checked ~.frog1{
animation-name: jump;
animation-duration: 1.5 s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.c2:checked ~.frog2{
animation-name: jump;
animation-duration: 1.5 s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.c3:checked ~.frog3{
animation-name: jump;
animation-duration: 1.5 s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Це повний код для всіх трьох жаб. Реалізувати все це вийшло завдяки тому, що у нас є псевдоклас :checked, який дозволяє застосувати стилі тільки до зазначених чекбоксам. Але ми йдемо далі, застосовуючи стилі ні до безпосередньо чекбоксу, а до елементу з класом .frog1, тобто до першої жабі. При цьому вкрай важливо, щоб вона перебувала в html-розмітки далі самого чекбокса. Але про це ми і так подбали.
Спробуйте. Властивість animation-fill-mode: forwards, необхідно нам для того, щоб після виконання анімації зберігалося стан, тобто жаба не поверталася на вихідне положення.
Бачите, я відзначив дві перші галочки і перші 2 жаби вирушили в подорож за екран.
На основі цього прикладу ви можете реалізовувати будь-які інші потрібні вам зв’язки. Наприклад, в залежності від вибору користувача показувати йому різне привітання і т. д.
Що ж, друзі, сьогодні ми розглянули досить цікаві способи анімації за допомогою css3, а якщо ви хочете вивчити інші властивості css3, можу порекомендувати до перегляду відповідні уроки з преміум-розділу. Там ви також освоїте плавні переходи, градієнти і багато-багато інших цікавих речей.
