ayyjay
@ayyjay
PHP - Разработчик, верстальщик

Как правильно сделать анимацию?

Всем здравствуйте. Есть вопрос по поводу анимации на css3.
Есть логотип 55a5b729ecc54318b01979fa94fdc5f2.png,
мне нужно сделать так, что бы две буквы "f" вели себя как дым/пар выходящий из чашки. Как правильно это реализовать? Я попробовал, но результат сильно тормозит страницу. Всем заранее спасибо за советы!
  • Вопрос задан
  • 466 просмотров
Пригласить эксперта
Ответы на вопрос 4
TheExplay
@TheExplay
Верстальщик - Junior FrontEnd
Вы хотите что-то типа такого? Только с блюром?
codepen.io/theexplay/pen/qdrLOg?editors=110
Ответ написан
teotlu
@teotlu
Навёрстываю упущенное
Я бы вообще делал через canvas и requestAnimationFrame. На мой взгляд, сама суть нужной вам анимации несколько выходит за рамки предназначения CSS-анимаций.
Вот, нагуглил алгоритм, который реализует примерно то, что вам нужно. Разумеется, из соображений производительности стоит максимально уменьшить площадь применения алгоритма.

Ещё, как вариант, вы можете всё это замутить на svg.
Ответ написан
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Без гифки анимации тяжело понять, как именно должен выглядеть сам эффект. Если у вас имеются отдельные картинки для этих двух букв, то можно легко анимировать с помощью transform: translateY + opacity.
Если анимация должна быть более "красивой" и сложной, вам поможет свг. В любом случае ваше текущее описание мало о чем говорит.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы