見出し画像

イラストをCSSアニメーションでふわふわ動かしてみる。

おすし

CSSアニメーション…webデザインに変化が付き、いいアクセントになりますよね。
ぜひ、使いこなせるようになりたいものです！
そこで今回はCSSアニメーションの練習にイラストを動かしてみました。


HTMLの準備

まずHTMLの準備です。動かしたい画像も一緒に用意しましょう！
用意した画像に適当なclassを付けます。今回はclass="fluffy"が該当箇所。
※背景やその他の要素はお好みでどうぞ

<div>
	<img class="fluffy" src="images/girl.PNG" alt="ふわふわ動く女の子">
</div>


CSSの準備【animationプロパティ】

続いてCSSです。
.fluffyに「animationプロパティ」を書き込みます。

  1. 　girl-animation…アニメーションの名前

  2. 　1.8s…1.8秒間で1サイクル

  3. 　ease-in-out…中間で速度が速くなる

  4. 　infinite…アニメーションを繰り返す

  5. 　alternate-reverse…逆方向と順方向を繰り返す（これで上下にふわふわする動きを再現します。）

/* animationプロパティの用意 */
.fluffy {
  animation: girl-animation 1.8s ease-in-out infinite alternate-reverse;
}


CSSの準備【@keyframes】

いよいよアニメーションで動きをつけていきますよ！
@keyframesとtransformプロパティでアニメーションの動きを指定していきます。

translateY…垂直方向の動きを指定することができます。
「0%の時に上方向に12px動かす」
「100%の時に下方向に12px動かす」
という指定をしています。これで上へ12px、下へ12px、と上下に動くようになります。

/* animationプロパティの用意 */
.girl-animation {
  animation: girl-animation 1.8s ease-in-out infinite alternate-reverse;
}

/* @keyframesの用意 */
@keyframes girl-animation {
  0% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(12px);
  }
}


動いているところを確認

これで準備は整いました。実際に動いているところを見てみましょう！

やりました！ふわふわ動いていますね。


もっとCSSアニメーションを試してみる【重ねる・ずらす】

せっかくイラストを動かすことに成功したので、もっと色々試してみましょう。
今のアニメーションに画像をもっと追加してみます。

雲を追加してみました。

アニメーションどうしを重ね合わせたり、動き、早さをずらすのも面白いですね！工夫次第で幅が大きく広がりそうです。
さらにCSSでもう一工夫してみますよ。

おお…ふわふわしながら降りてゆく…！

下にスクロールすることでイラストの女の子がふわふわと降りていくように見えます。
逆に、上方向にスクロールすると浮かんでいくようにも見えておもしろいですね。webデザインのワンポイントとして使えそうです。

追加したコードをCSSのコメントアウトでちょっぴり解説してます。

	<main>
		<div>
			<img class="fluffy" src="images/girl.PNG" alt="ふわふわ動く女の子">
			<img class="cloud-1-animation" src="images/cloud-1.PNG" alt="雲1">
			<img class="cloud-2-animation"  src="images/cloud-2.PNG" alt="雲2">
			<img class="cloud-3-animation" src="images/cloud-3.PNG" alt="雲3">
			<img class="cloud-4-animation"  src="images/cloud-4.PNG" alt="雲4">
		</div>
	</main>
body {
    /* 背景色のグラデーション */
	background: linear-gradient(0deg, rgba(255,134,57,1) 0%, rgba(74,130,255,1) 60%);
    /* fixedのための位置指定 */
	position: relative;
}
main {
    /* 背景画像 */
	background-image: url(images/stars.png);
    /* スクロールのための高さ出し */
	height: 300vh;
}
.fluffy {
    /* イラストの位置指定 */
	position: fixed;
    /* 上から5%の場所に配置 */
	top: 5%;
    /* 左から40%の位置に配置 */
	left: 40%;
    /* 重なり順を一番手前に */
	z-index: 99;
}


この記事ではイラストを上下に動かすことを例として載せましたがプロパティと関数次第で色々なアニメーションをつけることができます。
下記に載せているtransform-function以外も、アニメーションの関連プロパティをぜひ調べてみてください。
animation-timing-functionなど、かなり多く奥が深いですね。
MDN Web Docs（animation-timing-functionが記載してあるページのURLです）を見るのがおすすめですよ。

【回転させる】

回転…transform: rotate(90deg);
水平軸を中心に回転…transform: rotateX(180deg);
垂直軸を中心に回転…transform: rotateY(180deg);
Z軸を中心に回転…transform: rotateZ(90deg);

【拡大・縮小】

拡大・縮小…transform: scale(0.7);
水平に拡大・縮小…transform: scaleX(0.7);
垂直に拡大または縮小…transform: scaleY(3);

【歪める】

平面上で歪ませる…transform: skew(15deg, 15deg);
水平方向に歪ませる…transform: skewX(20deg);
垂直方向に歪ませる…transform: skewY(30deg);

【並行移動】

平面上で平行移動させる…transform: translate(42px, -18px);
水平方向に平行移動させる…transform: translateX(42px);
垂直方向に平行移動させる…transform: translateY(42px);

おまけ

「CSS Gradient」
今回、背景色のグラデーションを作るのに使用したジェネレーターです。
操作も簡単でわかりやすく、完成したグラデーションをコピペできるのが魅力的です！

この記事のために描いた女の子。
GIFだと画質が良くないのでここに載せておきます。せっかく描いたので（笑）😶‍🌫️

風船で浮いてます。


この記事が気に入ったらサポートをしてみませんか？