【初心者必見】コピペOK！CSSアニメーションで楽しくキャラクターを動かそう！

CSSアニメーションを使いたいけどどう書くのかな。。

楽しい感じの動きはどのようなものがあるの？

Web制作初心者によくある悩みですが、コツさえ押さえればCSSアニメーションは楽しく書けるようになります。

この記事では実際にポートフォリオの作成に使った画像を、縦や横の動きなどのCSSアニメーションを紹介します。

画像のようにキャラクターに合わせた楽しい動きにしましたのでぜひ参考になさってくださいね。

CSSアニメーションでキャラクターを動かしましょう。
今回の使用画像
CSSアニメーションで楽しくキャラクターを動すまとめ

CSSアニメーションでキャラクターを動かしましょう。

CSSアニメーションはCSSanimationプロパティを使用して動かします。

基本設定は、CSSでanimation-名前をつけたものに、 Keyframesで動きをつけ、動きの速さや繰り返しなどの動作も設定できます。

CSSアニメーションにはCSStransitionプロパティもあります。

こちらはKeyframesを使用せず設定が簡単ですが、CSSanimationのように回数やアニメーションの終了後状態などの設定ができません。

今回はCSSanimationプロパティを使って説明していきます。

HTML・CSS・画像を用意しましたので、最初はエディタにコピペをして動きを見てからコードを確認するのも良いでしょう。

おすすめのエディタはVisual Studio Codeです。

特にエディタにこだわりがない場合はダウンロードして使ってみてください。

Visual Studio Code

手順

HTMLに画像を用意する
CSSのbodyに背景を用意する
各画像はサイズを決め、position: absoluteで位置を決めて設定する
CSSでanimationに名前をつけて動きの回数などを設定する
Keyframesで動きの設定をする

HTML全体のコード

HTMLでは画像の設定をします。

今回は準備した画像になっていますが、お好みの画像で設定しても構いません。

画像の位置を決めるのにCSSでposition: relativeを設定しますのでdivにclass=”anime”の名前で囲っておきます。

お好みの画像を使用した場合は、画像名を変更するのを忘れないようにしてくださいね。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog</title>
  <link rel="stylesheet" href="css/style.css">

</head>
<body>
  <div class="anime">
    <div class="shishimai"><img src="image/shishimai.png"></div>
    <div class="hiyoko"><img src="image/hiyoko.png"></div>
    <div class="black-cat"><img src="image/black-cat.png"></div>
    <div class="balloon"><img src="image/balloon.png"></div>
  </div>  
</body>
</html>

CSS全体のコード

CSSでは動かしたい画像を.animeにposition: relativeを設置しposition: absoluteで画像の位置を決めます。

今回は任意の場所なのでお好みでtop,left,right,bottomの数値を変え場所を変更してもいいです。

CSSでanimationで回数などを決め、Keyframesで動きをつけましょう。

@charset "UTF-8";

body {
  background-image: url(../image/back-img.jpg);う
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}


.anime {
  position: relative;
}

/*shishimai image*/
.shishimai img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 400px;
  left: 20%;
}
/*shishimai Animation*/
.shishimai {
  animation: shishimai 4s linear infinite alternate;
}
@keyframes shishimai {
	0% {
    transform: rotate(0deg) translateX(-100px) rotate(0deg);
	}

	100% {
		transform: rotate(180deg) translateX(-100px) rotate(-180deg);
	}
}


/*hiyoko image*/
.hiyoko img {
  width: 200px;
  height: 150px;
  position: absolute;
  top: 450px;
  right: 20%;
}
/*hiyoko Animation*/
.hiyoko {
  animation: hiyoko 2.5s infinite 0s;
}
@keyframes hiyoko {
  0%   {
    transform: scale(1.0, 1.0) translate(0%, 0%); 
  }
  10%  { 
    transform: scale(1.1, 0.9) translate(0%, 0%);
  } 
  50%  { 
    transform: scale(1.2, 0.8) translate(0%, 15%); 
  }
  100% { 
    transform: scale(1.0, 1.0) translate(0%, 0%); 
  }
}


/*black-cat image*/
.black-cat img {
  width: 300px;
  height: 250px;
  position: absolute;
  top: 100px;
  right: 150px;
}
/*black-cat Animation*/
.black-cat {
  animation: black-cat 5s infinite cubic-bezier(0.5,0,0.5,1);
}
@keyframes black-cat {
  0%, 5% {
    transform: translate(-12em);
  }
  45%, 55% {
    transform: translate(12em);
  }
  95%, 100% {
    transform: translate(-12em);
  }
}


/*balloon image*/
.balloon img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 20px;
  left: 20%;
}
/*balloon Animation*/
.balloon {
  animation: balloon-scoping 2s alternate infinite;

  animation-timing-function: linear;
}
@-webkit-keyframes balloon-scoping {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(100px);
  }
}



/*レスポンシブ*/

/*タブレット*---------------------------*/
@media screen and (max-width: 768px) {
 
  /*shishimai image*/
  .shishimai img {
    width: 125px;
    height: 125px;
  }

  /*hiyoko image*/
  .hiyoko img {
    width: 125px;
    height: 100px;
  }

  /*black-cat image*/
  .black-cat img {
    width: 200px;
    height: 125px;
    top: 150px;
  }

  /*balloon image*/
  .balloon img {
    width: 125px;
    height: 125px;
  }

}


/*モバイル*---------------------------*/
@media screen and (max-width: 375px) {
 
  /*shishimai image*/
  .shishimai img {
    width: 100px;
    height: 100px;
  }

  /*hiyoko image*/
  .hiyoko img {
    width: 100px;
    height: 75px;
  }

  /*black-cat image*/
  .black-cat img {
    width: 150px;
    height: 100px;
  }

  /*balloon image*/
  .balloon img {
    width: 100px;
    height: 100px;
  }

}

CSSで背景の設定をしよう

CSSでbodyにbackground-imageで背景を用意します。

画像の階層には気をつけましょう。

body {
  background-image: url(../image/back-img.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

動かしたい画像の位置を決め動かしてみよう

shishimaiを使って説明していきます。

shishimaiは弧を描くように飛び跳ねる動きです。

/*shishimai image*/
.shishimai img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 400px;
  left: 20%;
}

shishimaiの画像はposition: absoluteでtop、leftで位置を決めます。
今回は任意なのでお好みの位置に変更してみてもいいでしょう。

CSSanimationのプロパティ

/*shishimai Animation*/
.shishimai {
  animation: shishimai 4s linear infinite alternate;
}

animation: shishimai：定義名(shishimai)
4s：動く時間
linear：一定の速度で始まって終わる
infinite：ループ
alternate：通常方向と逆方向を続ける

プロパティを組み合わせて様々な動きを設定できます。

CSSanimationのプロパティはMDNで確認できるのでチェックしてみてください。

animation – CSS: カスケーディングスタイルシート | MDN

@keyframes shishimai {
	0% {
    transform: rotate(0deg) translateX(-100px) rotate(0deg);
	}

	100% {
		transform: rotate(180deg) translateX(-100px) rotate(-180deg);
	}
}

＠keyframes shishimai（shishimaiのアニメーションの変化の指定）

0% {：変化の始まり
transform: rotate(0deg) translateX(-100px) rotate(0deg);：変化の始まりの動き
}

100% {：変化の終わり
transform: rotate(180deg) translateX(-100px) rotate(-180deg);：変化の終わりの動き
}