Как реализовать анимацию появления кнопок ease-in-out?

Question

[Jedi]

На сайте вимео очень прикольная анимация кнопок, вот ссылка.


Как это реализовать ?
Я сделал у себя уже появления и исчезновение кнопок при наведении, но я не знаю как анимировать это всё.
Прошу мне помочь с этим.

Спасибо!

Answer 1

[motr]

элементам

transform: translateY(0);
opacity: 0
transition: transform .3s ease-in-out, opacity .3s ease-in-out

элементам при ховере

transform: translateY(10px);
opacity: 1

Comments

[Конан Варвар]

transition: transform .3s ease-in-out, opacity .3s ease-in-out;

Можно вот так:

transition: all .3s ease-in-out;

Мелочь, но короче :)

[vvvadimos]

Конан Варвар, но работает медленнее

[motr]

Конан Варвар, написал так, на случай, если автор решит что-то выполнять быстрее, что-то медленнее

[motr]

PHPjedi, это данные в секундах! вместо .3s (300 миллисекунд) подставь своё значение!

[Jedi]

Большое вам всем спасибо!