Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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

Варіант 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

There are no comments to display.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.