Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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

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

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


×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.