CSSアニメーションで炎や煙を再現！純CSSで作るリアルな演出テクニック

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

今回は「CSSアニメーションだけで炎や煙を再現する方法」について解説していきます。

一見すると複雑そうな「炎」や「煙」の動きですが、実は @keyframes と box-shadow、filter をうまく組み合わせることで、ライブラリなしでも表現できます。この記事では、基本的な考え方からサンプルコードまでしっかり紹介するので、インタラクティブな演出を取り入れたい方はぜひ参考にしてください。

なぜCSSで炎や煙を再現するのか？

JavaScriptやWebGLを使えばよりリアルな表現は可能ですが、CSSだけで実装するメリットも多くあります。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

CSSで炎を再現する例

炎を表現するポイントは「色の揺らめき」と「形の変化」です。
以下のデモコードでは、オレンジから黄色にかけてのグラデーションをアニメーションさせ、炎が揺れるような雰囲気を出しています。

<div class="fire-container">
<div class="fire"></div>
<div class="smoke"></div>
<div class="smoke"></div>
<div class="smoke"></div>
<div class="smoke"></div>
</div>

この例では、radial-gradient を使って炎らしい色の重なりを作り、scale で形を揺らめかせています。

CSSで煙を再現する例

煙は「ふわふわと漂いながら薄れていく」動きが特徴です。
丸い要素を縦に流し、opacity と blur を組み合わせて表現します。

body {
background: #111;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
overflow: hidden;
color: #fff;
font-family: sans-serif;
}


.fire-container {
position: relative;
width: 100px;
height: 200px;
}


.fire {
width: 50px;
height: 80px;
background: radial-gradient(circle at 50% 80%, #ffdd55, #ff6600, #ff2200);
border-radius: 50% 50% 40% 40%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
animation: flicker 1s infinite alternate;
filter: blur(1px);
}


@keyframes flicker {
0% { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.9; }
50% { transform: translateX(-50%) scaleY(1.1) scaleX(0.9); opacity: 0.8; }
100% { transform: translateX(-50%) scaleY(1) scaleX(1.05); opacity: 1; }
}


.smoke {
width: 20px;
height: 20px;
background: #ccc;
border-radius: 50%;
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
animation: rise 5s infinite;
filter: blur(3px);
opacity: 0;
}


.smoke:nth-child(2) { animation-delay: 1s; }
.smoke:nth-child(3) { animation-delay: 2s; }
.smoke:nth-child(4) { animation-delay: 3s; }


@keyframes rise {
0% { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0.8; }
50% { transform: translateX(-50%) translateY(-80px) scale(1); opacity: 0.5; }
100% { transform: translateX(-50%) translateY(-150px) scale(1.5); opacity: 0; }
}

複数の .smoke 要素をランダムなタイミングで流すことで、より自然な煙の演出が可能になります。

炎と煙を組み合わせた演出

炎と煙を組み合わせると、キャンプファイヤーや焚き火のような演出が可能になります。
例えば以下のように配置すると、よりリアルに近づけられます。

この演出をWebサイトに取り入れれば、季節イベントやキャンペーンページなどで「おっ」と目を引くデザインになります。

まとめ

CSSだけでも、工夫次第で「炎」や「煙」のような複雑な動きを再現できます。

この2つを組み合わせれば、静的なWebサイトでも一気に臨場感のある演出が可能です。

ぜひ自分のWeb制作に取り入れてみてください。