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

9月 3, 2025 9月 3, 2025

小瀧

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

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

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

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

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

追加ライブラリ不要で軽量
CSSプロパティだけで調整できるので学習コストが低い
hoverやクリックなど、インタラクションに組み込みやすい
パフォーマンスが高く、レスポンシブデザインとも相性が良い

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 要素をランダムなタイミングで流すことで、より自然な煙の演出が可能になります。