CSS горящее пламя свечи, смена разных состояний при задувки. Как сделать?

Question

[Volodya-NRG]

Как сделать плавную анимацию горящего пламяни? Необходимо несколько состояний пламени - слегка дуют, нормально дуют, сильно дуют.

Comments

[Антон Мудренок]

Можете еще тут чекнуть: https://codepen.io/collection/XzBNar/

Answer 1

[Иван Вишневский]

Let me google that for you. https://codepen.io/tag/candle/

Comments

[xmoonlight]

Ни одной нет правдоподобно горящей. Все какие-то убогие)

[alvvi]

xmoonlight: ну, конкретно смена состояния там имеется, ждем реализацию автора, которая затмит все предыдущие работы (:

[Антон Мудренок]

xmoonlight: а такая? =) https://codepen.io/pjkarlik/pen/c13c39f812abab2580...

[Volodya-NRG]

вот на этом остановился https://codepen.io/k-di/pen/qNpzaA
там вот как раз были возможности влиять на разные состояния, увеличивая или уменьшая состояния ветра, размера пламя, свечения.

Answer 2

[xmoonlight]

Я долго думал, что как-бы делать правдоподобную анимацию и единственный ответ: использовать webm-ролик с минимальной площадью (только на анимируемую зону), который будет встроен в общую сцену дизайна.
Пример, с того же близарда можно увидеть на их логотипе к игре StarCraft II:

Т.е. предлагаю, заснять реальное пламя свечи с разными потоками воздуха и подменять эти ролики по нужным событиям.