Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Додати анімацію при наведенні / кліку

Варіант 1

1. Клікаємо на елемент, який треба анімувати

2. Вибираємо State - hover (при наведенні) або click image.png.d43806a3cc7f04410d556d77ec720460.png

3. Розділ Extra

4. Додати ефекти transform з потрібними параметрами

rotate - обертання

scale - збільшення / зменшення

translate - переміщення

Наприклад, для піднімання на 5px догори:

image.png.327073070c6e445e79d6da022e79b34c.png 

Для обертання на 90°

 

image.png.172cde41eb1fb3335c5d12d6b36fd8eb.png

 

5. І щоб зробити ці ефекти плавними можна задати transition

image.png.5c682fc4af4cc90373fcf1a975b88751.png

 

 

 

Варіант 2

 

1. Клікаємо на елемент, який треба анімувати

2. Вибираємо State - hover (при наведенні) або click

3. Розділ Dimension

4. Задати margin (відступ), що елемент зміщувався у потрібну сторону

image.png.5aa639d762ae3d1127b3d5105baa4a59.png 

5. Розділ Decorations, додаємо тінь

 

image.png.d1c6a5d67b5acd776795ea4f5375c858.png

 

6. І щоб зробити ці ефекти плавними можна задати transition

image.png.5c682fc4af4cc90373fcf1a975b88751.png

 

 


Comments

Немає коментарів для відображення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.