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

【デモサイト】美容室・エステ・ネイルサロンHPのデザイン例
初心者

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

その悩みを解決します。

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

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

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

【サンプル】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移動する」コードです。

 translateY(-90px)

アイコンを上向きではなく、下向きに移動する場合は数値の前の-(マイナス記号)を抜けばOKです。

 translateY(90px)

サンプルのような垂直ではなく、水平に移動するなら次のようにtranslateXを使いましょう。

 translateX(90px)
かんた

数値にマイナスを付けると左向きに移動します。

FAQ

アニメーションFAQ
WordPress上でも使えるの?

使えます。今回紹介したCSSアニメーションコードはjQueryは一切使っていません。

WordPressサイトでも静的なHTMLページ上でも使えます。

表示されない。。。

表示されない場合はサンプルコードのCSSのセレクタが、既存のセレクタと被っていないかを確認してください。

例えばサンプルの「box」というセレクタがすでに使われているかもしれません。別の名前にして試してみましょう。

移動する四角のアイコンは別のものに変更できる?

できます。
サンプルではCSSでdivに枠線を付けているだけです。CSSで丸、三角、六角形などにも変更できます。ぜひ挑戦してみてください。

WordPressの固定ページに導入したい。どこにサンプルコードを貼ればいいの?

固定ページ上なら「カスタムHTMLブロック」でHTMLコードを貼り付けてください。その他の方法も構いません。

CSSも管理しやすい場所でOKです。わからない場合はカスタマイザーの追加CSSに貼り付けてください。

まとめ

CSSだけで作る背景アニメーションを紹介しました。

できるだけアレンジしやすいようコードの意味を含め解説しました。

本記事で紹介したアニメーションを実装した人は、ぜひ僕あてにツイートしてください!どんな感じにアレンジしたかを見にいきます。

かんた

ツイッターで@swell_maniaを入れてツイートしていただければ、コメントさせていただきます!

よかったらシェアしてね!
  • URLをコピーしました!
目次