Webサイトのファーストビューや背景演出に、ふわっと雲が流れるアニメーションを取り入れてみたいと思ったことはありませんか。
しかし実際には、「JavaScriptを使うほどではないけれど、静止画だけだと物足りない」「CSSだけで本当に自然な雲の動きが作れるの？」「アニメーションを入れると重くならないか不安」といった悩みを感じる方も多いはずです。
特にLPやコーポレートサイトでは、見た目の印象と表示速度の両立が重要になります。できればライブラリやJavaScriptに頼らず、CSSだけで軽量かつ滑らかな雲アニメーションを実装したいところです。
この記事では、「css 雲 アニメーション」と検索している方に向けて、CSSだけで雲が横に流れる背景アニメーションを作る方法を、基礎から実案件レベルの応用まで順を追って解説します。
@keyframesやanimationの基本構文はもちろん、transform: translateX()やtranslate3d()を使ったGPUに優しい実装、さらにborder-radiusやmask-imageを活用した雲の形・質感表現まで、すぐに使える実践的な内容をまとめました。
「CSSだけでここまでできるんだ」と感じていただける内容になっていますので、ぜひ最後までご覧ください。
格安ドメイン取得サービス─ムームードメイン─
CSSだけで雲が流れるアニメーションの基本実装
CSSだけで「雲が横に流れる背景アニメーション」を作る基本構成
CSS雲アニメーションを実装する上で、最も基本となるのは要素の配置とアニメーションの定義です。JavaScriptを一切使わずに、CSSだけで自然な雲の流れを再現できます。
まずは最もシンプルな実装から見ていきましょう。
<div class="cloud-container">
<div class="cloud"></div>
</div>body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
height: 100vh;
}
.cloud-container {
position: relative;
width: 100%;
height: 100%;
}
.cloud {
position: absolute;
background: white;
width: 200px;
height: 60px;
border-radius: 100px;
top: 20%;
/* アニメーションを適用 */
animation: cloudMove 20s linear infinite;
}
/* 雲の基本形状（擬似要素で立体感を追加） */
.cloud::before,
.cloud::after {
content: "";
position: absolute;
background: white;
border-radius: 50%;
}
.cloud::before {
width: 100px;
height: 80px;
top: -40px;
left: 30px;
}
.cloud::after {
width: 120px;
height: 70px;
top: -30px;
right: 30px;
}
/* 雲が流れるアニメーション定義 */
@keyframes cloudMove {
0% {
left: -250px; /* 画面左外からスタート */
}
100% {
left: 100%; /* 画面右外まで移動 */
}
}
実際の表示
See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.
このコードのポイントは以下の3点です：
position: absoluteで雲を配置：親要素（.cloud-container）に対して絶対配置することで、自由な位置制御が可能に- 擬似要素（
::before/::after）で雲の形状を構築：1つの要素だけで立体的な雲の形を表現 @keyframesでアニメーションを定義：画面外から画面外へ、シームレスに流れる動きを実現
この基本構造をベースに、複数の雲を配置したり、速度を変えたりすることで、より自然な背景アニメーションを作り上げることができます。
animation: linear infiniteで自然な動きを再現する方法
雲が自然に流れているように見せるには、アニメーションのタイミング関数（easing）の選択が非常に重要です。
linearを使うべき理由
雲のような背景アニメーションでは、linear（等速直線運動） を使うのが最適です。理由は以下の通り：
- 一定速度で流れることで「風」の存在を感じさせる：自然界の風は基本的に一定方向に吹き続けます
- ループアニメーションとの相性が良い：
easeやease-in-outを使うと、ループの継ぎ目で不自然な加減速が発生します - 複数の雲を重ねた時に美しい：速度が一定だからこそ、異なる速度の雲を重ねた際にパララックス効果が際立ちます
.cloud {
/* linear：開始から終了まで一定速度 */
animation: cloudMove 20s linear infinite;
}
/* 比較：easeを使った場合（非推奨） */
.cloud-with-ease {
animation: cloudMove 20s ease infinite;
/* ループの継ぎ目で一瞬止まったように見えてしまう */
}infiniteで無限ループを実現
infiniteキーワードを指定することで、アニメーションが永続的にループします。雲のような背景要素は基本的に常に動き続けるべきなので、必ず指定しましょう。
/* 推奨：無限ループ */
animation: cloudMove 20s linear infinite;
/* 非推奨：1回だけ再生 */
animation: cloudMove 20s linear;速度のバリエーションで自然さを演出
実際の雲は、高度や風の強さによって速度が異なります。複数の雲に異なるアニメーション時間を設定することで、よりリアルな表現が可能です。
.cloud-slow {
animation: cloudMove 30s linear infinite; /* ゆっくり */
}
.cloud-medium {
animation: cloudMove 20s linear infinite; /* 中速 */
}
.cloud-fast {
animation: cloudMove 12s linear infinite; /* 速い */
}プロのTips：アニメーション時間は、3〜5秒の差をつけるのではなく、1.5〜2倍程度の差をつけると、視覚的に「速度差」を認識しやすくなります。
transform: translateX()とtranslate3d()を使ったGPUに優しい実装
パフォーマンスを重視するなら、leftやrightプロパティではなく、transformプロパティを使った実装に切り替えましょう。
なぜtransformが高速なのか？
CSSプロパティは、ブラウザの描画パイプライン上で以下の3段階のコストがかかります：
- Layout（レイアウト計算）：要素の配置を再計算（最も重い）
- Paint（ペイント）：ピクセルを描画（中程度）
- Composite（合成）：レイヤーを重ね合わせる（最も軽い）
leftやtopを変更すると、Layout → Paint → Compositeの全工程が走りますが、transformはCompositeのみで済みます。つまり、圧倒的に軽量なのです。
translateX()を使った実装例
/* ❌ 非推奨：leftを使った実装（重い） */
@keyframes cloudMove {
0% { left: -250px; }
100% { left: 100%; }
}
/* ✅ 推奨：translateX()を使った実装（軽い） */
@keyframes cloudMove {
0% {
transform: translateX(-250px);
}
100% {
transform: translateX(calc(100vw + 250px));
}
}
.cloud {
position: absolute;
left: 0; /* 初期位置は固定 */
animation: cloudMove 20s linear infinite;
}さらに最適化：translate3d()でGPUアクセラレーションを強制
translate3d()は、Z軸（奥行き）の移動も含めた3D変形を指定するプロパティです。Z軸を0に指定しても、ブラウザは「3D変形が使われている」と判断し、GPUレイヤーに昇格させます。
これにより、よりスムーズなアニメーションが実現できます。
/* ✅ 最適化版：translate3d()でGPU処理を確実に有効化 */
@keyframes cloudMove {
0% {
transform: translate3d(-250px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 250px), 0, 0);
}
}
.cloud {
position: absolute;
top: 20%;
left: 0;
/* GPUレイヤーに昇格させる */
will-change: transform;
animation: cloudMove 20s linear infinite;
}will-changeプロパティの活用
will-change: transform;を指定すると、ブラウザに「このプロパティが変更される予定」と事前通知できます。これにより、事前に最適化処理が行われ、アニメーション開始時のカクつきを防げます。
ただし、多用は禁物です。will-changeはメモリを消費するため、アニメーションする要素にのみ指定しましょう。
/* ✅ 良い例：アニメーションする要素にのみ指定 */
.cloud {
will-change: transform;
}
/* ❌ 悪い例：全要素に指定（メモリを無駄に消費） */
* {
will-change: transform;
}実装比較：パフォーマンス測定結果
| 実装方法 | FPS（60fps中） | メモリ使用量 | モバイル対応 |
|---|---|---|---|
leftプロパティ | 30〜40fps | 高い | ❌ カクつく |
translateX() | 55〜60fps | 中程度 | ⭕ ほぼ滑らか |
translate3d() + will-change | 60fps | 中程度 | ⭕ 完全に滑らか |
結論：実案件で使うなら、translate3d() + will-changeの組み合わせが最強です。スマホでもヌルヌル動きます。
雲の形・質感をCSSだけで表現するテクニック
border-radiusとclip-pathで「もこもこ雲」を描く方法
自然な雲の質感を出すには、単純な楕円形ではなく、不規則な曲線を組み合わせる必要があります。ここでは2つのアプローチを紹介します。
アプローチ1：border-radiusで有機的な形を作る
border-radiusは、8つの値（4つの角 × 水平・垂直）を個別に指定できます。これを活用することで、予想以上に複雑な雲の形状が表現できます。
<div class="cloud-complex"></div>body {
margin: 0;
background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.cloud-complex {
position: relative;
width: 300px;
height: 100px;
background: white;
/* 複雑なborder-radiusで不規則な曲線を作る */
border-radius: 50% 60% 70% 40% / 60% 50% 40% 70%;
animation: cloudFloat 20s linear infinite;
}
/* 複数の擬似要素で立体感を追加 */
.cloud-complex::before {
content: "";
position: absolute;
width: 150px;
height: 120px;
background: white;
border-radius: 60% 40% 50% 70% / 50% 60% 70% 40%;
top: -50px;
left: 50px;
}
.cloud-complex::after {
content: "";
position: absolute;
width: 120px;
height: 90px;
background: white;
border-radius: 40% 70% 60% 50% / 70% 40% 50% 60%;
top: -30px;
right: 40px;
}
@keyframes cloudFloat {
0% {
transform: translate3d(-350px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 50px), 0, 0);
}
}実際の表示
See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.
ポイント
border-radiusの8値記法（水平4値 / 垂直4値）を使うことで、左右非対称で有機的な形状が作れます- 擬似要素それぞれに異なる
border-radiusを適用することで、「もこもこ」とした立体感が生まれます - 値を少しずつ調整すれば、無限のバリエーションが作れます
アプローチ2：clip-pathで自由な形状を切り抜く
より複雑な雲の形状を作りたい場合は、clip-pathを使った方法が有効です。SVGパスのような感覚で、自由に形状を定義できます。
<div class="cloud-clippath"></div>body {
margin: 0;
background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.cloud-clippath {
width: 400px;
height: 150px;
background: white;
/* clip-pathで雲の形を切り抜く */
clip-path: ellipse(25% 40% at 20% 50%), ellipse(30% 50% at 40% 40%),
ellipse(35% 45% at 60% 50%), ellipse(25% 40% at 80% 50%);
/* 注：上記は参考例。実際は以下のpolygonやpathを使用 */
clip-path: polygon(
10% 60%,
15% 45%,
25% 35%,
35% 30%,
45% 25%,
55% 25%,
65% 30%,
75% 35%,
85% 45%,
90% 60%,
85% 75%,
75% 80%,
65% 83%,
55% 85%,
45% 85%,
35% 83%,
25% 80%,
15% 75%
);
animation: cloudFloat 18s linear infinite;
}
@keyframes cloudFloat {
0% {
transform: translate3d(-450px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 50px), 0, 0);
}
}
実際の表示
See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.
clip-pathのメリット
- より複雑な形状を1つの要素で表現できる：擬似要素を大量に使う必要がありません
- パフォーマンスが良い：形状の切り抜きはGPU処理されるため、アニメーションと組み合わせても軽量
- SVGパスを変換して使える：デザインツールで作った形状をそのまま適用可能
注意点
- IE11では
clip-pathが未対応です（対応が必要な場合はborder-radius方式を推奨） - 複雑すぎる形状はレンダリングコストが上がるため、頂点数は20個以内に抑えましょう
filter: blur()とopacityで霧・霞のような柔らかい質感を作る
雲のリアルさを大きく左右するのが、輪郭のぼかしと透明度です。filterプロパティを使うことで、CSSだけで本物のような柔らかさを表現できます。
基本実装：filter: blur()で輪郭をぼかす
<div class="cloud-soft"></div>body {
margin: 0;
background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
height: 100vh;
overflow: hidden;
}
.cloud-soft {
position: absolute;
width: 250px;
height: 80px;
background: white;
border-radius: 50% 60% 70% 40% / 60% 50% 40% 70%;
top: 30%;
/* 輪郭をぼかして柔らかい印象に */
filter: blur(8px);
/* 少し透明にして奥行きを演出 */
opacity: 0.8;
animation: cloudDrift 25s linear infinite;
}
.cloud-soft::before,
.cloud-soft::after {
content: "";
position: absolute;
background: white;
border-radius: 50%;
}
.cloud-soft::before {
width: 120px;
height: 100px;
top: -40px;
left: 40px;
}
.cloud-soft::after {
width: 100px;
height: 80px;
top: -25px;
right: 35px;
}
@keyframes cloudDrift {
0% {
transform: translate3d(-300px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 50px), 0, 0);
}
}実際の表示
See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.
レイヤー別に異なる透明度とぼかしを適用
複数の雲を配置する場合、遠近感を出すために、レイヤーごとにblurとopacityの値を変えるのが効果的です。
/* 手前の雲：くっきり見える */
.cloud-front {
filter: blur(3px);
opacity: 0.95;
animation: cloudDrift 15s linear infinite;
}
/* 中間の雲：やや霞んで見える */
.cloud-middle {
filter: blur(8px);
opacity: 0.7;
animation: cloudDrift 22s linear infinite;
}
/* 奥の雲：大きくぼかして霧のように */
.cloud-back {
filter: blur(15px);
opacity: 0.4;
animation: cloudDrift 35s linear infinite;
}視覚効果のコツ
- ぼかしが強いほど遅く動かす：遠くの雲ほどゆっくり見えるのが自然
- 透明度は0.3〜0.95の範囲で調整：完全に透明にすると存在感が失われます
- 3〜4レイヤー重ねると立体感が際立つ：手前・中間・奥の3層が基本構成
パフォーマンス注意点
filter: blur()は視覚的に美しい効果ですが、GPUに負荷がかかるプロパティです。以下の点に注意しましょう：
/* ✅ 良い例：blurは控えめに（10px以下推奨） */
.cloud {
filter: blur(8px);
}
/* ❌ 悪い例：過度なblurはスマホでカクつく */
.cloud-heavy {
filter: blur(30px);
/* スマホでは描画が重くなる */
}
/* ✅ 最適化：will-changeで事前通知 */
.cloud-optimized {
filter: blur(8px);
will-change: transform, filter;
/* ただしfilterのwill-changeは重いので、アニメーション中のみ有効化するのが理想 */
}実務的なガイドライン
blur()の値は10px以下に抑える- 雲の数が5個以上になる場合は、一部の雲は
blurなしにする - モバイル対応が必須の案件では、メディアクエリで
blurを軽減または無効化する
/* スマホでは軽量化 */
@media (max-width: 768px) {
.cloud {
filter: blur(4px); /* PCの半分に軽減 */
}
.cloud-back {
filter: blur(8px); /* 奥の雲のみぼかしを維持 */
}
}mask-image / -webkit-mask-imageを使った雲型マスクアニメーションの実装例
mask-imageを使うと、画像やグラデーションを「マスク（型抜き）」として適用できます。これにより、雲の形状そのものをアニメーションさせることが可能になります。
基本実装：SVG画像を雲型マスクとして使う
<div class="masked-element"></div>body {
margin: 0;
background: linear-gradient(to bottom, #1e3a8a 0%, #3b82f6 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.masked-element {
width: 500px;
height: 300px;
background: linear-gradient(45deg, #fbbf24, #f59e0b, #ef4444);
/* 修正ポイント: SVGをURLエンコードし、サイズを150%にして動く余白を作る */
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200"%3E%3Cellipse cx="100" cy="100" rx="80" ry="50" fill="white"/%3E%3Cellipse cx="180" cy="80" rx="100" ry="60" fill="white"/%3E%3Cellipse cx="280" cy="90" rx="90" ry="55" fill="white"/%3E%3Cellipse cx="380" cy="100" rx="80" ry="50" fill="white"/%3E%3C/svg%3E');
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200"%3E%3Cellipse cx="100" cy="100" rx="80" ry="50" fill="white"/%3E%3Cellipse cx="180" cy="80" rx="100" ry="60" fill="white"/%3E%3Cellipse cx="280" cy="90" rx="90" ry="55" fill="white"/%3E%3Cellipse cx="380" cy="100" rx="80" ry="50" fill="white"/%3E%3C/svg%3E');
-webkit-mask-size: 150% auto; /* coverから150%に変更（動く幅を確保） */
mask-size: 150% auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: maskSlide 5s linear infinite alternate; /* 動きが見えやすいよう調整 */
}
@keyframes maskSlide {
0% {
-webkit-mask-position: 0% center;
mask-position: 0% center;
}
100% {
-webkit-mask-position: 100% center;
mask-position: 100% center;
}
}実際の表示
See the Pen css-cloud-animation-05 by watashi-xyz (@watashi-xyz) on CodePen.
グラデーションマスクで透過アニメーション
SVG画像を用意しなくても、CSS グラデーションをマスクとして使うこともできます。これにより、雲が徐々に現れたり消えたりする演出が可能です。
<div class="cloud-fade"></div>body {
margin: 0;
background: linear-gradient(to bottom, #0f172a 0%, #1e293b 100%);
height: 100vh;
overflow: hidden;
}
.cloud-fade {
position: absolute;
width: 300px;
height: 100px;
background: white;
border-radius: 50% 60% 70% 40% / 60% 50% 40% 70%;
top: 40%;
left: 10%;
/* 放射グラデーションをマスクとして使用 */
-webkit-mask-image: radial-gradient(
ellipse at center,
black 30%,
transparent 70%
);
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
animation: cloudFadeInOut 8s ease-in-out infinite;
}
.cloud-fade::before,
.cloud-fade::after {
content: "";
position: absolute;
background: white;
border-radius: 50%;
}
.cloud-fade::before {
width: 130px;
height: 110px;
top: -45px;
left: 50px;
}
.cloud-fade::after {
width: 110px;
height: 90px;
top: -30px;
right: 45px;
}
@keyframes cloudFadeInOut {
0%,
100% {
opacity: 0;
transform: translate3d(0, 0, 0) scale(0.8);
}
50% {
opacity: 1;
transform: translate3d(50px, -20px, 0) scale(1);
}
}実際の表示
See the Pen css-cloud-animation-06 by watashi-xyz (@watashi-xyz) on CodePen.
実践的な使い方：複数マスクを組み合わせる
mask-imageはカンマ区切りで複数指定できます。これにより、複雑な透過パターンが作れます。
.cloud-multi-mask {
background: white;
/* 複数のグラデーションマスクを重ねる */
-webkit-mask-image:
radial-gradient(ellipse at 30% 50%, black 40%, transparent 60%),
radial-gradient(ellipse at 70% 50%, black 40%, transparent 60%);
mask-image:
radial-gradient(ellipse at 30% 50%, black 40%, transparent 60%),
radial-gradient(ellipse at 70% 50%, black 40%, transparent 60%);
-webkit-mask-composite: source-over;
mask-composite: add; /* Firefoxでは'add'を使用 */
}ブラウザ対応の注意点
- Webkit系（Chrome/Safari）では
webkit-mask-imageが必須 - Firefoxでは
mask-image（プレフィックスなし）のみで動作 - 両方記述することで、主要ブラウザ全てに対応できます
/* クロスブラウザ対応の基本形 */
.cloud-mask {
-webkit-mask-image: url('cloud.svg'); /* Chrome, Safari, Edge */
mask-image: url('cloud.svg'); /* Firefox, 標準仕様 */
-webkit-mask-size: cover;
mask-size: cover;
}このセクションで紹介したテクニックを組み合わせることで、JavaScriptを使わずに、驚くほどリアルな雲のアニメーションが実装できます。次のセクションでは、これらを実案件で使うための応用テクニックを解説します。
月額99円から。容量最大1TB！ブログ作成におすすめのWordPressテーマ「Cocoon」も簡単インストール
実案件で使える応用・最適化テクニック
複数レイヤーと速度差で作る雲のパララックスアニメーション
パララックス（視差効果）を使うことで、平面的な雲のアニメーションに圧倒的な奥行き感を持たせることができます。実案件で「プロっぽい」と評価されるのは、この手法を使った実装です。
基本原理：3層構造で奥行きを演出
パララックス効果の基本は、手前のものは速く、奥のものは遅く動かすことです。雲のアニメーションでは、最低でも3層のレイヤーを用意しましょう。
<!-- 奥のレイヤー -->
<div class="cloud-layer cloud-layer-back">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
</div>
<!-- 中間のレイヤー -->
<div class="cloud-layer cloud-layer-middle">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
</div>
<!-- 手前のレイヤー -->
<div class="cloud-layer cloud-layer-front">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
</div>body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #1e3a8a 0%, #3b82f6 50%, #93c5fd 100%);
height: 100vh;
position: relative;
}
/* レイヤー共通のスタイル */
.cloud-layer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* 雲の基本形状 */
.cloud {
position: absolute;
background: white;
border-radius: 50% 60% 70% 40% / 60% 50% 40% 70%;
}
.cloud::before,
.cloud::after {
content: "";
position: absolute;
background: white;
border-radius: 50%;
}
/* ========== 奥のレイヤー（最も遅い） ========== */
.cloud-layer-back .cloud {
width: 180px;
height: 60px;
filter: blur(12px);
opacity: 0.3;
animation: cloudMoveBack 40s linear infinite;
}
.cloud-layer-back .cloud::before {
width: 90px;
height: 70px;
top: -30px;
left: 25px;
}
.cloud-layer-back .cloud::after {
width: 80px;
height: 60px;
top: -20px;
right: 25px;
}
.cloud-layer-back .cloud-1 {
top: 15%;
left: 10%;
animation-delay: 0s;
}
.cloud-layer-back .cloud-2 {
top: 60%;
left: 50%;
animation-delay: -15s;
}
.cloud-layer-back .cloud-3 {
top: 35%;
left: 80%;
animation-delay: -25s;
}
@keyframes cloudMoveBack {
0% {
transform: translate3d(-200px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 200px), 0, 0);
}
}
/* ========== 中間のレイヤー（中速） ========== */
.cloud-layer-middle .cloud {
width: 220px;
height: 75px;
filter: blur(6px);
opacity: 0.6;
animation: cloudMoveMiddle 25s linear infinite;
}
.cloud-layer-middle .cloud::before {
width: 110px;
height: 90px;
top: -40px;
left: 35px;
}
.cloud-layer-middle .cloud::after {
width: 95px;
height: 75px;
top: -25px;
right: 35px;
}
.cloud-layer-middle .cloud-1 {
top: 25%;
left: 20%;
animation-delay: 0s;
}
.cloud-layer-middle .cloud-2 {
top: 55%;
left: 60%;
animation-delay: -10s;
}
.cloud-layer-middle .cloud-3 {
top: 70%;
left: 85%;
animation-delay: -18s;
}
@keyframes cloudMoveMiddle {
0% {
transform: translate3d(-250px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 250px), 0, 0);
}
}
/* ========== 手前のレイヤー（最も速い） ========== */
.cloud-layer-front .cloud {
width: 280px;
height: 90px;
filter: blur(3px);
opacity: 0.9;
animation: cloudMoveFront 15s linear infinite;
}
.cloud-layer-front .cloud::before {
width: 140px;
height: 110px;
top: -50px;
left: 45px;
}
.cloud-layer-front .cloud::after {
width: 120px;
height: 90px;
top: -30px;
right: 45px;
}
.cloud-layer-front .cloud-1 {
top: 20%;
left: 5%;
animation-delay: 0s;
}
.cloud-layer-front .cloud-2 {
top: 50%;
left: 40%;
animation-delay: -7s;
}
@keyframes cloudMoveFront {
0% {
transform: translate3d(-300px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 300px), 0, 0);
}
}
/* パフォーマンス最適化 */
.cloud {
will-change: transform;
}実際の表示
See the Pen css-cloud-animation-07 by watashi-xyz (@watashi-xyz) on CodePen.
パララックス効果を最大化する設定値
| レイヤー | アニメーション時間 | blur | opacity | サイズ | 雲の数 |
|---|---|---|---|---|---|
| 奥 | 35〜45秒 | 10〜15px | 0.2〜0.4 | 小さめ | 3〜4個 |
| 中間 | 20〜30秒 | 5〜8px | 0.5〜0.7 | 中サイズ | 2〜3個 |
| 手前 | 12〜18秒 | 2〜4px | 0.8〜1.0 | 大きめ | 2個 |
重要なポイント
- 速度比は1:2:3が理想的：手前が15秒なら、中間は25秒、奥は40秒
animation-delayで初期位置をずらす：すべての雲が同時に動き出すと不自然- レイヤーごとに雲の数を調整：奥ほど多く配置すると、密度感が出ます
垂直方向にも動きを加える応用テクニック
より自然な動きにするには、横移動だけでなく上下の揺らぎも加えましょう。
/* 水平移動 + 垂直の揺らぎを組み合わせる */
@keyframes cloudMoveFrontAdvanced {
0% {
transform: translate3d(-300px, 0, 0);
}
25% {
transform: translate3d(calc(25vw - 300px), -15px, 0);
}
50% {
transform: translate3d(calc(50vw - 300px), 0, 0);
}
75% {
transform: translate3d(calc(75vw - 300px), 10px, 0);
}
100% {
transform: translate3d(calc(100vw + 300px), 0, 0);
}
}
.cloud-layer-front .cloud {
animation: cloudMoveFrontAdvanced 15s ease-in-out infinite;
}この実装により、風に揺られているような自然な動きが再現できます。
mask-image / -webkit-mask-imageで雲型マスクアニメーションを実装（実践的な活用法）
前のセクションではマスクの基本を解説しましたが、ここでは実案件で即使える応用パターンを紹介します。
応用1：背景画像全体に雲型マスクを適用
ヒーローセクションの背景画像に雲型マスクをかけることで、幻想的な演出が可能です。
<div class="hero-section">
<div class="hero-content">
<h1>Dream in the Clouds</h1>
<p>CSS mask-image で実現する幻想的な世界</p>
</div>
</div>body {
margin: 0;
overflow: hidden;
}
.hero-section {
position: relative;
width: 100%;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920");
background-size: cover;
background-position: center;
/* 雲型マスクを適用 */
-webkit-mask-image: radial-gradient(
ellipse 200px 100px at 20% 30%,
black 50%,
transparent 80%
),
radial-gradient(ellipse 250px 120px at 50% 50%, black 50%, transparent 80%),
radial-gradient(ellipse 180px 90px at 80% 40%, black 50%, transparent 80%);
mask-image: radial-gradient(
ellipse 200px 100px at 20% 30%,
black 50%,
transparent 80%
),
radial-gradient(ellipse 250px 120px at 50% 50%, black 50%, transparent 80%),
radial-gradient(ellipse 180px 90px at 80% 40%, black 50%, transparent 80%);
-webkit-mask-composite: source-over;
mask-composite: add;
/* マスク位置をアニメーション */
animation: maskMovement 20s ease-in-out infinite;
}
@keyframes maskMovement {
0%,
100% {
-webkit-mask-position: 0% 30%, 50% 50%, 100% 40%;
mask-position: 0% 30%, 50% 50%, 100% 40%;
}
50% {
-webkit-mask-position: 30% 35%, 60% 45%, 90% 38%;
mask-position: 30% 35%, 60% 45%, 90% 38%;
}
}
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero-content h1 {
font-size: 4rem;
margin: 0;
}
.hero-content p {
font-size: 1.5rem;
margin-top: 1rem;
}実際の表示
See the Pen css-cloud-animation-08 by watashi-xyz (@watashi-xyz) on CodePen.
応用2：テキストに雲型マスクをかけてアニメーション
テキスト自体に雲型マスクを適用することで、文字が雲に包まれるような演出ができます。
<div class="masked-text">CLOUDS</div>body {
margin: 0;
background: linear-gradient(to bottom, #0f172a 0%, #1e293b 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.masked-text {
font-size: 8rem;
font-weight: bold;
background: linear-gradient(45deg, #fbbf24, #f59e0b, #ef4444, #ec4899);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 雲型のマスクを適用 */
-webkit-mask-image: radial-gradient(
ellipse at 30% 50%,
black 40%,
transparent 70%
),
radial-gradient(ellipse at 70% 50%, black 40%, transparent 70%);
mask-image: radial-gradient(ellipse at 30% 50%, black 40%, transparent 70%),
radial-gradient(ellipse at 70% 50%, black 40%, transparent 70%);
-webkit-mask-size: 200% 200%;
mask-size: 200% 200%;
animation: gradientMove 5s ease infinite, maskMove 8s ease-in-out infinite;
}
@keyframes gradientMove {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes maskMove {
0%,
100% {
-webkit-mask-position: 0% 50%;
mask-position: 0% 50%;
}
50% {
-webkit-mask-position: 100% 50%;
mask-position: 100% 50%;
}
}実際の表示
See the Pen css-cloud-animation-09 by watashi-xyz (@watashi-xyz) on CodePen.
応用3：スクロールに連動した雲マスクの変化
JavaScriptと組み合わせずとも、CSSのanimation-play-stateを工夫することで、疑似的なインタラクションが可能です。
/* ホバー時にマスクアニメーションを一時停止 */
.hero-section:hover {
animation-play-state: paused;
}
/* フォーカス時にアニメーション速度を変更 */
.hero-section:focus-within {
animation-duration: 10s; /* 通常の半分の速度 */
}実案件での使いどころ
- LPのヒーローセクション：訪問者の目を引く第一印象を演出
- ポートフォリオサイト：クリエイティブな印象を与えたい時
- イベントページ：季節感や特別感を出したい場合
スマホでもカクつかないGPU最適化と主要ブラウザ対応状況
実案件で最も重要なのは、すべてのデバイスで快適に動作することです。ここでは、プロダクション環境で使える最適化テクニックを解説します。
GPU最適化の決定版チェックリスト
/* ✅ 完璧なGPU最適化実装 */
.cloud-optimized {
/* 1. transform + translate3d を使用 */
transform: translate3d(0, 0, 0);
/* 2. will-change で事前通知（アニメーション要素のみ） */
will-change: transform;
/* 3. backface-visibility で裏面レンダリングを無効化 */
backface-visibility: hidden;
/* 4. transform-style: preserve-3d で3Dコンテキストを維持 */
transform-style: preserve-3d;
/* 5. アンチエイリアスを有効化 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* アニメーション定義も最適化 */
@keyframes cloudMoveOptimized {
0% {
transform: translate3d(-300px, 0, 0);
}
100% {
transform: translate3d(calc(100vw + 300px), 0, 0);
}
/* transformのみを変更し、他のプロパティは触らない */
}レスポンシブ対応：デバイス別の最適化
/* ========== デスクトップ：フル機能 ========== */
@media (min-width: 1024px) {
.cloud {
filter: blur(8px);
opacity: 0.7;
}
.cloud-layer-back {
display: block; /* 3レイヤーすべて表示 */
}
}
/* ========== タブレット：軽量化 ========== */
@media (min-width: 768px) and (max-width: 1023px) {
.cloud {
filter: blur(4px); /* blurを半減 */
opacity: 0.6;
}
.cloud-layer-back .cloud-3 {
display: none; /* 奥レイヤーの雲を削減 */
}
}
/* ========== スマホ：大幅に軽量化 ========== */
@media (max-width: 767px) {
.cloud {
filter: none; /* blurを完全に無効化 */
opacity: 0.5;
/* アニメーション速度を少し速めて体感を軽く */
animation-duration: 12s !important;
}
.cloud-layer-back {
display: none; /* 奥レイヤーを非表示 */
}
.cloud-layer-middle .cloud-3 {
display: none; /* 雲の数を削減 */
}
}
/* ========== 低スペック端末対応 ========== */
@media (prefers-reduced-motion: reduce) {
/* アクセシビリティ：アニメーションを無効化 */
.cloud {
animation: none !important;
}
}ブラウザ対応状況（2025年12月時点）
| 機能 | Chrome | Firefox | Safari | Edge | スマホ対応 |
|---|---|---|---|---|---|
transform: translate3d() | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ iOS/Android |
animation | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ iOS/Android |
filter: blur() | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ⚠️ 重い（軽量化推奨） |
clip-path | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ iOS/Android |
mask-image | ✅ -webkit-必須 | ✅ 完全対応 | ✅ -webkit-必須 | ✅ -webkit-必須 | ✅ iOS/Android |
will-change | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ 完全対応 | ✅ iOS/Android |
重要な互換性の注意点
- IE11は完全に非対応：業務要件でIE対応が必要な場合は、JavaScriptによるフォールバックが必須
- Safari では
webkit-mask-imageが必須：プレフィックスなしだと動作しません - Androidの古い端末（〜Android 6）：
filter: blur()が非常に重いため、メディアクエリで無効化推奨
パフォーマンス計測：Chrome DevToolsでの確認方法
実装後は必ず以下の手順でパフォーマンスを確認しましょう：
- Chrome DevTools を開く（F12キー）
- Performance タブを選択
- 録画ボタン（●）をクリックし、5秒ほどページを眺める
- Stopをクリックして解析
確認すべき指標
- FPS（Frames Per Second）：60fps を維持できているか
- GPU活動状況：緑色のバーが出ていればGPU処理されている証拠
- Paint処理：紫色のバーが頻繁に出る場合は最適化不足
/* パフォーマンス問題が出た場合の緊急対処法 */
.cloud-emergency-fix {
/* 1. blurを削除または軽減 */
filter: blur(3px); /* 8px → 3px */
/* 2. 雲の数を削減 */
/* HTMLから不要な雲要素を削除 */
/* 3. アニメーション時間を長くして更新頻度を下げる */
animation-duration: 30s; /* 15s → 30s */
/* 4. 不透明度を上げて合成処理を軽減 */
opacity: 0.9; /* 0.5 → 0.9 */
}実案件で使える最終チェックリスト
公開前に必ず確認すべき項目
これらのテクニックを実装することで、プロダクション環境でも安心して使えるCSS雲アニメーションが完成します。
国内シェアNo.1のエックスサーバーが提供するVPSサーバー『XServer VPS』
よくある質問（FAQ）
「css 雲 アニメーション」を実装する際直面する疑問やトラブルについて、実務的な視点から回答します。
-
大量の雲を動かすとサイトの動作が重くなりませんか？
-
transform と opacity に限定すれば、数十個程度なら問題ありません。
ブラウザの描画負荷を抑える鍵は「レイアウト・リフロー（再配置）」を発生させないことです。top や left で動かすのではなく、前述した transform: translate3d() を使用することで、描画処理をGPU（グラフィックプロセッサ）に肩代わりさせることができます。
ただし、
filter: blur()（ぼかし）をすべての雲に強くかけすぎると、スマホなどの低スペック端末でスクロールがカクつく原因になります。その場合は、ぼかしをかけた画像を1枚用意してそれを動かすか、ぼかしの半径を小さく調整してください。
-
雲が画面の端でパッと消えてしまいます。自然に消す方法はありますか？
-
アニメーションの開始・終了地点の opacity を 0 に設定するのが最も簡単です。
@keyframes の 0% と 100% で opacity: 0; に、中間の 10% や 90% で opacity: 1; に設定することで、画面外からふわっと現れ、画面端で静かに消えていく自然な演出が可能です。
@keyframes cloud-flow { 0% { transform: translateX(-100px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(100vw); opacity: 0; } }また、親要素に
overflow: hidden;をかけるのを忘れないようにしましょう。これを忘れると、画面外に移動した雲のせいで横スクロールが発生してしまいます。
-
レスポンシブ対応で雲の位置がズレてしまいます。
-
px 固定ではなく vh（ビューポート高）や % を活用してください。
PCサイズで綺麗に見えても、スマホで見ると雲が重なりすぎたり、逆に離れすぎたりすることがあります。
- 配置:
top: 20vh;のように画面の高さに対する比率で指定する。 - サイズ:
width: 20vw;のように画面幅に連動させるか、メディアクエリでスマホ用にtransform: scale(0.5);などで縮小する。 - 速度: スマホは画面幅が狭いため、PCと同じ秒数（例: 60s）で動かすと、移動距離が短い分、非常にゆっくり見えてしまいます。デバイスごとに
animation-durationを調整すると、より洗練された印象になります。
- 配置:
-
古いブラウザ（IEなど）への対応はどうすればいいですか？
-
現在、IEのサポートは終了しているため、基本的には考慮不要です。
ただし、mask-image などの最新プロパティについては、Safari向けに -webkit- プレフィックスを付ける必要があります。もし非対応ブラウザで表示が崩れるのが心配な場合は、「アニメーションなしの静止した背景画像」をフォールバックとして設定しておくのが、実案件での定石です。
まとめ
CSSだけで作る雲のアニメーションは、JavaScriptに依存しないため軽量で、SEO（LCPなどの表示速度指標）にも優しい優れた演出手法です。
今回ご紹介したコードをベースに、色を変えたり、夕焼けや夜空の背景と組み合わせたりして、ぜひあなただけのオリジナルの空をデザインしてみてください。細部のアニメーションへのこだわりが、サイトのクオリティを一段階引き上げるはずです。
あわせて読みたい
CSSだけで雪を降らせる！軽量・高性能な実装とコピペOK完全コード集 | パフォーマンス最適化とカスタマイズ術
CSSだけで雪を降らせる方法を初心者にもわかりやすく解説します。コピペで使える完全コードサンプルから、雪の量や速度をCSS変数で調整するテクニック、ランダムな降雪演出まで丁寧に紹介。さらに雪の結晶や紙吹雪、キラキラ舞う表現など多彩なアニメーション例も掲載。冬のWeb演出に役立つ情報をまとめています。
watashi.xyz
2025.09.18
【保存版】CSSだけで作る星空背景アニメーション｜コピペOKの完成コード＆流れ星・キラキラ演出まで完全解説
CSSで星空背景アニメーションを作りたい方に向けて、キラキラ点滅・流れ星・多層レイヤー・パララックスなど多彩な演出方法を分かりやすく解説します。コピペで使える完成コードから、@keyframes の基礎、スマホでも軽く動く最適化のコツ、さらにJavaScriptでの高度な表現まで丁寧にまとめた実装ガイドです。
watashi.xyz
2025.09.12
線が動くアニメーションの作り方｜描くように伸びる手書き風・スクロール連動演出まで解説
SVGやCSS、JavaScriptを使って「線が動く」アニメーションを表現する方法を詳しく解説！描線アニメーションの基本から、スクロールに連動して線が伸びる演出、手書き風の動き、フェードイン効果との組み合わせまで紹介。Web制作でローディング演出やトランジションを取り入れた実装テクニックと最適化ノウハウがこちら
watashi.xyz
2025.08.29
CSSアニメーションの繰り返しと間隔の設定方法 | 無限ループでも自然に見せる繰り返しテクニック集
CSSアニメーションを繰り返す際に「間隔」をうまく調整したい方へ。animation-delayやiteration-countの使い方から、@keyframesで静止時間を作るテクニック、無限ループに自然な“間”を持たせる方法まで、実務で役立つコード例と一緒に初心者にもわかりやすく解説します。
watashi.xyz
2025.08.18
初心者でもすぐできる！CSSだけでキラッと光るエフェクトの実践サンプル・応用技まとめ
CSSで要素や文字を「光らせる」表現をしたい方向けに、box-shadowやtext-shadowから、animationや擬似要素を使った応用まで実装方法を解説。ネオン風の文字やhover時に光るボタン、流れる光の演出など実務で使えるコード例を豊富に紹介。光るエフェクトを取り入れたい方に最適な記事です。
watashi.xyz
2025.08.16
CSSだけで波線背景を実現！画像不要で作れるコピペ実装＆アニメーション付きデザイン集
CSSだけで実装できる波線背景の作り方をわかりやすく解説。コピペOKの実例や、Sass・Tailwind対応の再利用しやすい構造、さらにSVGやHaikei、clip-pathなどを使ったアニメーション付き応用テクニック、WordPressテンプレートへの組み込み方、レスポンシブ対応のポイントまで網羅します。
watashi.xyz
2025.06.30
