Как сделать такую анимацию?

Question

[olya_097]

как сделать такую анимацию?
https://fex.net/s/rxnlfex

https://codepen.io/anon/pen/LvKEyj

Comments

[Lord_Dantes]

Прелоадер?

[Ragtime Kitty]

Это же простое опасити и transform: translateY, в чем сложность-то?

Answer 1

[RAX7]

https://codepen.io/anon/pen/mgZevB?editors=0100

Comments

[RAX7]

Максим Ленский, три шарика это прелоадер для видео, а на видео анимация)

[Владимир Проскурин]

Максим Ленский,

там про три шарика вопрос ...

Наверное, все таки вопрос про меню? Автор приложила еще ссылку на codepen, где реализовано меню.

[Максим]

Владимир Проскурин, RAX7, затроил я ...пиво бросаю :))

[olya_097]

RAX7, по сути только это добавляется?
transform: translateY(50px)
transition: opacity 250ms ease, transform 250ms ease, visibility 250ms linear

[Владимир Проскурин]

Максим Ленский, но анимашку я скопирую

[RAX7]

olya_097, угу =)

[Максим]

Владимир Проскурин, да я рамсы попутал ....думал о этих шариках вопрос ....:))

[RAX7]

Максим Ленский, минздрав не зря предупреждает ведь)

[Максим]

RAX7, у меня вообще миниотпуск кончается - скоро сквозану от сюда :))

[RAX7]

Максим Ленский, с тостера или из РФ?

[Максим]

RAX7, я с Казаши ...а сквозану от сюда ..но буду появляться но не так часто как щас

[Максим]

RAX7, кстати SVG2 вышло ...слыхал ?

[olya_097]

RAX7, просто у меня большой пропуск появился
у Вас такого не вижу

[RAX7]

Максим Ленский, на stackoverflow решил эмигрировать значит

spoiler

[Максим]

RAX7, я там давно уже ... дольше чем здесь ...

[Максим]

olya_097, translateY уменьши ...не 50px а меньше 30px или 20px - подбери в общем

[olya_097]

Максим Ленский, RAX7, спасибо

[RAX7]

olya_097, кушай с булочкой=)
Максим Ленский,

кстати SVG2 вышло ...слыхал ?

не знал, надо будет почитать
https://github.com/w3c/svgwg/wiki/SVG-2-new-features

[Максим]

RAX7, я уже грызу гранит науки

[olya_097]

Максим Ленский, RAX7, есть момент когда переводишь стрелочку и подменю может пропасть

[Максим]

olya_097, что и куда переводишь ? не ясно ..пример кода покажите

[olya_097]

Максим Ленский, в этом же коде, с меню
https://codepen.io/anon/pen/vMqqKO

[Максим]

olya_097, Что у меня ни что не пропадет ...

[olya_097]

Максим Ленский, наведите на первый пункт
и медленно двигайте стрелку внизу, будет момент когда стрелка ушла от пункта но не дошла до подменю

[Максим]

olya_097, https://codepen.io/topicstarter/pen/zXVVPb вот щас наведите на выпадашку увидите зазор ? вот этот зазор надо убрать либо сделать что бы сразу при наведении поднималось до dropdown

[olya_097]

Максим Ленский, просто я ж даю submenu:hover transform: none

а сабменю стоит transform: translateY(10px)
transition: opacity 250ms ease, transform 250ms ease, visibility 250ms linear

[Максим]

olya_097, не трансформ ноне , трансформ транслатеY(0)

[olya_097]

Максим Ленский, все-равно так пропадает

[Максим]

olya_097, вот смотрите, не мог ответить так как я за сыном в садик ходил, https://codepen.io/topicstarter/pen/zXVVPb

[olya_097]

Максим Ленский, это святое)
спасибо