【サンプルコード付き】CSS背景アニメーション！jQuery・SVGなしで動く背景アニメーションの作り方

2022 6/21

2022年6月21日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

初心者

繰り返しループする背景アニメーションを作りたい
サンプルのコードが欲しい
jQueryなしで動くCSSのコードってないの？

その悩みを解決します。

CSSだけで動く背景アニメーションの作り方をサンプルコード付きで公開します！

jQueryやJavaScriptは使いません。かなり簡単なテクニックですので、初心者の方もチャレンジしてみてください。

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

【サンプル】背景が動くアニメーションCSSコード

CSSコードだけで動く背景アニメーションのサンプルです。

サンプル1

このサンプルアニメーションのコードを公開します！

必要なもの

HTMLコード
CSSコード

不要なもの

jQuery
JavaScript
PHP
SVG、PNGなどのアイコン画像

かんた

このCSS背景アニメーションの作り方を解説していきます。

使うのは次のHTMLコードとCSSコードだけです。

HTMLコード

<div class="box">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>

CSSコード

.box {
width: 100%;
height: 500px;
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
position:relative;
}
.box div {
height: 80px;
width: 80px;
position: absolute;
top: 8%;
left: 8%;
animation: animate 5s linear infinite;
background: transparent;
border:solid 3px rgba(255,255,255,0.8);
z-index:999999;
}
.box div:nth-child(1) {
top: 18%;
left: 18%;
animation: animate 15s linear infinite;
}
.box div:nth-child(2) {
top: 27%;
left: 87%;
animation: animate 10s linear infinite;
}
.box div:nth-child(3) {
top: 80%;
left: 90%;
animation: animate 5s linear infinite;
}
.box div:nth-child(4) {
top: 60%;
left: 70%;
animation: animate 9s linear infinite;
}
.box div:nth-child(5) {
top: 88%;
left: 12%;
animation: animate 9s linear infinite;
}
.box div:nth-child(6) {
top: 70%;
left: 33%;
animation: animate 8s linear infinite;
}
.box div:nth-child(7) {
top: 33%;
left: 66%;
animation: animate 8s linear infinite;
}

.box div:nth-child(8) {
top: 70%;
left: 60%;
animation: animate 16s linear infinite;
}
.box div:nth-child(9) {
top: 26%;
left: 53%;
animation: animate 7s linear infinite;
}
.box div:nth-child(10) {
top: 45%;
left: 15%;
animation: animate 12s linear infinite;
}


@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(0);
opacity:1;
}
	
100% {
transform: scale(1.5) translateY(-90px) rotate(360deg);
opacity:0;
}
}

コードは貼り付ければ自分のサイトでそのまま使えます。

色やアニメーションをアレンジをしたい人向けに、サンプルコードの中身を解説します。

背景の色

サンプルでは青いグラデーションを設定しています。この部分はアニメーションの対象ではありません。

次の行が対象のコードです。

.box{
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

単純にbackgroundオプションで背景色を指定しています。

linear-gradientがグラーデーションを作るオプションです。

かんた

グラデーションが不要な場合は、単色に変更してもOKです。

グラデーションの角度

グラーデーションの角度についてです。サンプルでは上から下向きの垂直な角度でグラデーションを設定しています。

サンプルコードでは次の通り「180deg」がグラーデーション角度です。

180deg

グラーデーションの角度を垂直（上下）から水平（左右）に変更したい場合は90degにしましょう。

四角いパーツの変更・調整コード

サンプルのアニメーションでは四角いアイコンが浮かび上がり、回転して消えていきます。この四角のアイコンも画像ではなくHTMLで作成しています。

仕組みは簡単でdivに縦横のサイズを指定して枠を付けているだけです。

<div class="box">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>

アイコンの大きさを変更する

次のコードでアイコンサイズの調整をしています。

.box div {
height:80px;
width:80px;
}

高さ・横幅をピクセルで指定しているだけです。大きさを調整したい場合は任意の数値に変更してください。

小さくするなら次のように書き換えます。

.box div {
height:50px;
width:50px;
}

反対により大きくしたなら次のようにコードを書き換えます。

.box div {
height:120px;
width:120px;
}

枠線の調整

サンプルのアニメーションでは四角いアイコンに3pxの実線を指定しています。

次のコードが対象です。

.box div {
border:solid 3px rgba(255,255,255,0.8);
}

枠線を細くするには3pxをより小さい値に数値を変更しましょう。

例えば次のように1pxにサイズを変更すると枠線が極小になります。

.box div {
border:solid 1px rgba(255,255,255,0.8);
}

枠線の色はborderプロパティーで指定しています。

サンプルでは「rgba(255,255,255,0.8)」を指定しています。rgbaの最後のコード（0.8）は透明度です。枠線を透明にする場合に0.1~0.9の数値を指定します。

枠線はrgba以外にも色コードでも指定可能です。例えば枠線を黒にしたい場合は「#000」、白なら「#fff」といった具合です。

アイコンの配置を調整

アイコンが表示される初期配置についてです。各アイコンは次のコードで初期配置を指定しています。

.box div{
top: 20%;
left: 20%;
}

「top・left」は場所を指定するプロパティーです。top:0とすると一番上がスタート位置になります。

同様にleftは左を基準にどこに配置するかを指定するプロパティーです。left:0とすれば一番左端からスタートします。

かんた

アイコンごとに任意の値に変更してください。

アニメーションのループ

サンプルのアニメーションは繰り返し再生されます。次の対象コードにある「infinite」でループを指定しています。

.box div{
animation: animate 10s linear infinite;
}

かんた

一度きりの再生にしたい場合はinfiniteをコードから省きましょう。

アニメーションの速度調整

サンプルではアイコンごとにアニメーションの速度を変えています。

アニメーションの速度は次のコードで制御しています。

.box div{
animation: animate 10s linear infinite;
}

アニメーションの速度を遅くしたい場合はサンプルコードの「10S」を下記のように、より大きな値に数値を変更してください。

.box div{
animation: animate 20s linear infinite;
}

逆にアニメーションのスピードを早くするには値を小さな数値に変更すればOKです。

.box div{
animation: animate 3s linear infinite;
}

アイコンの移動する向き

サンプルではアイコンは「上」に移動します。次のコード上にある「translateY」でアイコンの向移動する向きを指定しています。

100% {
transform: scale(1.3) translateY(-90px) rotate(360deg);

transformオプションは指定した要素を移動するコード。このオプションとあわせて使うのがtranslateXとtranslateYです。

かんた

末尾が「X」「Y」と違います似ているので注意しましょう。

値	説明
translateX	垂直方向を指定コードの具体例 translateY（100px）：右に100px translateY（-100px）：左に100px
translateY	垂直方向を指定コードの具体例 translateX（100px）：上に100px translateX（-100px）：下に100px

改めてサンプルのコードを見てみましょう。

サンプルアニメーションでは「上に90px移動する」コードです。