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

Question

[Аброр Джейки]

Всем здравствуйте. Есть вопрос по поводу анимации на css3.
Есть логотип ,
мне нужно сделать так, что бы две буквы "f" вели себя как дым/пар выходящий из чашки. Как правильно это реализовать? Я попробовал, но результат сильно тормозит страницу. Всем заранее спасибо за советы!

Answer 1

[twobomb]

Сделай .gif анимацию и не парься.

Answer 2

[Murat Atila]

Вы хотите что-то типа такого? Только с блюром?
codepen.io/theexplay/pen/qdrLOg?editors=110

Comments

[Аброр Джейки]

Да. Спасибо и на этом. Просто у меня получается не много тормознутым)

[Murat Atila]

Попробуйте собрать анимацию на bouncejs.com, сам пользуюсь этим сервисом, получаются очень плавные и классные анимации. Ну а блюр допишите сами. Наверно, лучше всего, через svg

Answer 3

[teotlu]

Я бы вообще делал через canvas и requestAnimationFrame. На мой взгляд, сама суть нужной вам анимации несколько выходит за рамки предназначения CSS-анимаций.
Вот, нагуглил алгоритм, который реализует примерно то, что вам нужно. Разумеется, из соображений производительности стоит максимально уменьшить площадь применения алгоритма.

Ещё, как вариант, вы можете всё это замутить на svg.

Comments

[teotlu]

SelenIT2: спасибо! Как-то давно натыкался на неё, а тут вот забыл) Добавлю в закладки.

Answer 4

[Nikolay Talanov]

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

Comments

[Аброр Джейки]

185.8.212.222/cc/new

[teotlu]

Аброр Джаббаров: какая-то странная реализация эффекта. Если нужен блюр, точно смотрите в сторону canvas, он это сможет сделать проще и без тормозов. Есть масса готовых решений.

[teotlu]

Аброр Джаббаров: ну да, или svg. Хотя по поводу производительности блюра в svg ничего не могу сказать.