. 【CSSアニメーション】要素を「ぽよん」と動かす方法を解説します。
【CSSアニメーション】要素を「ぽよん」と動かす方法を解説します。
【CSSアニメーション】要素を「ぽよん」と動かす方法を解説します。

【CSSアニメーション】要素を「ぽよん」と動かす方法を解説します。

  1. TOP >
  2. Web制作 >
  3. CSS >

CSS Web制作 アニメーション

【CSSアニメーション】要素を「ぽよん」と動かす方法を解説します。

2024年4月15日

※本記事は広告が含まれる場合があります。

なやむくん要素にぷるぷるとした動きをつけたい。 なやむさんぽよんと弾むようなアニメーションを使用したい。

などの疑問や悩みを解決してまいります。

要素に動きを加えたいと思ったことはありませんか？

アニメーションなど動きを加えるとなるとJavascriptやjQueryなどのイメージがありますが、本記事ではJSは使いません！

今回はHTMLとCSSのみを使用して「ぽよん」としたアニメーションの実装方法を解説します。

みつた「ぽよん」としたアニメーションは、ボタンなどの要素に使われることが多く、アニメーションを実装することでクリック率が上がったという例もあるそうです！

本記事の目次

  • 1 完成例を見てみましょう
  • 2 CSSコードの解説
    • 2.1 animationプロパティで一括指定
    • 2.2 transform-originプロパティで変形となる基点を決める
    • 2.3 transformプロパティのtranslateY()関数で落下のスタート位置を決める
    • 2.4 @keyframesにプリンの動きの指定を入れる
  • 3 【実用性あり】リンクボタンに対して「ぽよん」を実装してみた
  • 4 本記事のまとめ

完成例を見てみましょう

まずは完成例を見てみましょう。

See the Pen Untitled by koutarou mori (@koutarou-mori) on CodePen.

このようにプリンを上から落として着地した反動で「ぽよん」としたアニメーションを実装しています。

それではアニメーションを実装しているコードについて解説していきたいと思います。

※HTMLコードについては記述量が少ないため割愛します。

CSSコードの解説

今回使用したCSSコードは以下です。

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; } .pudding-container { width: 200px; height: 200px; position: relative; } .pudding { width: 100%; height: 100%; background-image: url("https://mitsutano-oshiro.com/wp-content/uploads/2023/08/pudding.png"); background-size: cover; animation: purine 1.5s linear infinite; transform-origin: center bottom; /* 上から落ちてくるスタート地点 */ transform: translateY(-300px); } @keyframes purine { 10% { /* 上から落ちてくる */ transform: translateY(0); } 15% { /* 落ちてきた衝撃で縦に少しつぶれる */ transform: scale(1.1, 0.9); } 20% { /* 落ちてきた衝撃で縦にさらに少しつぶれる */ transform: scale(1.1, 0.8); } 30% { /* 縦につぶれながらもつぶれた反動で少し横に伸びる */ transform: scale(1.15, 0.7); } 45% { /* 縦につぶれた反動で横に伸びる */ transform: scale(1.2, 0.5); } 50% { /* つぶれた反動で一気に縦に伸びる */ transform: scale(0.85, 1.15); } 60% { /* 伸びた反動で縦につぶれる */ transform: scale(1.1, 0.9); } 70% { /* つぶれた反動で縦に少し伸びる */ transform: scale(0.95, 1.08); } 90% { /* 伸びた反動でほんの少し縦につぶれる */ transform: scale(0.98, 1.02); } 100% { /* 通常のサイズになる */ transform: scale(1, 1); } }

bodyタグとpudding-containerクラスのCSSは見た目に対しての指定なので、ここはお好みで調整していただけたらと思います。

animationプロパティで一括指定

今回CSSアニメーションということで@keyframeとanimationプロパティを使用しています。

CSSアニメーションの基本！@keyframeとanimationプロパティについては以下記事で詳しく解説しています。

おすすめ！ 【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

続きを見る

animationプロパティは様々なCSSが用意されていますが、これらを一括で指定することができます。

例えば今回だと以下のようにまとめて指定しています。

animation: purine 1.5s linear infinite;

この指定を分解すると以下のCSSが指定されています。

animation-name: purine; /* アニメーションの名前の指定 */ animation-duration: 1.5s; /* アニメーションの再生時間 */ animation-timing-function: linear; /* アニメーションの再生速度 */ animation-iteration-count: infinite; /* アニメーションの再生回数 */

animationプロパティで一括指定する場合は以下のように記述します。

animation: ①name ②duration ③timing ④delay ⑤iteration ⑥direction ⑦fill ⑧play; よろこびくん記述量も少なくなって便利ですね！

それぞれのanimationプロパティについては以下の記事に解説記事がありますので是非参考にしてください。↓↓

おすすめ！ 【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

続きを見る

transform-originプロパティで変形となる基点を決める

アニメーションを見ていると、プリンが落下したような「ぽよん」としたアニメーションを実装しています。

これはtransform-originプロパティを使用して、要素の下を変形の基点としていることで表現ができています。

なやむくんどういうことでしょうか...。 みつた実際に見てみた方が早いですね！以下を見てみてください。

それでは実際にtransform-originプロパティを外してアニメーションを見てみましょう。

See the Pen ぽよんアニメーション【transform-originプロパティなしの場合】 by koutarou mori (@koutarou-mori) on CodePen.

すると画像の中心を基点とし「ぽよん」となっているのがわかりますでしょうか。

transform-originプロパティの初期値が「50% 50% 0」のためこのような動きになります。

以下がサンプルです。

今回のようにtransform-origin: center bottom;を指定してあげることによって、画像の下を基点としてアニメーションしてくれます。

この記述のおかげで画像の下が変化の起点となり、プリンが地面に着地したときの「ぽよん」とした動きを表現しています。

よろこびくんこのプロパティなしではプリンが落ちたときの動きに近づけることはできないですね！ みつたそゆことです！ transformプロパティのtranslateY()関数で落下のスタート位置を決める

直接「ぽよん」に関わっているわけではありませんが、プリンが落下するときのスタート位置を指定しています。

落下させる動きを入れないのであればこの指定は不要です。

@keyframesにプリンの動きの指定を入れる

プリンの動きを表現する重要ポイントです。

細かく適切に指定することでそのアニメーションの質が向上します。

今回は以下のように指定しています。

@keyframes purine { 10% { /* 上から落ちてくる */ transform: translateY(0); } 15% { /* 落ちてきた衝撃で縦に少しつぶれる */ transform: scale(1.1, 0.9); } 20% { /* 落ちてきた衝撃で縦にさらに少しつぶれる */ transform: scale(1.1, 0.8); } 30% { /* 縦につぶれながらもつぶれた反動で少し横に伸びる */ transform: scale(1.15, 0.7); } 45% { /* 縦につぶれた反動で横に伸びる */ transform: scale(1.2, 0.5); } 50% { /* つぶれた反動で一気に縦に伸びる */ transform: scale(0.85, 1.15); } 60% { /* 伸びた反動で縦につぶれる */ transform: scale(1.1, 0.9); } 70% { /* つぶれた反動で縦に少し伸びる */ transform: scale(0.95, 1.08); } 90% { /* 伸びた反動でほんの少し縦につぶれる */ transform: scale(0.98, 1.02); } 100% { /* 通常のサイズになる */ transform: scale(1, 1); } } なやむくん指定がいっぱいで訳が分からないです～… みつたいっぺんに理解しようとせずに焦らずひとつひとつ見ていきましょう！

まずプリンを変形させるのにtransformプロパティのscale()関数を指定します。

scale()関数は要素を拡大・縮小させることができます。

scale()関数の第一引数がX方向（横幅）、第二引数がY方向（縦幅）に対して指定できます。

通常だと要素の中心を基点に変化するのですが、今回はtransform-origin: center bottom;を指定しているので、要素の下を基点に変化するので、プリンが落ちたあとの動きを表現できています。

@keyframeでは再生時間の％ごとにscale()関数を指定して細かくプリンの拡大・縮小を指定していきます。

％ごとの動きについてはコードにコメントを記述していますのでご確認いただけますと幸いです。

みつた動きがうまくイメージできないときはプリンが落ちる動画を参考にしてみるといいですよ！

【実用性あり】リンクボタンに対して「ぽよん」を実装してみた

先程は「ぽよん」の動きを理解してもらうためにプリンを例に解説しましたが、Web制作でプリンのような要素を落として「ぽよん」のアニメーションを実装することはあまりないと思います。

なやむくんまぁ、確かにそうですね・・・

なので「ぽよん」のアニメーションがよく使われる例としてリンクボタンに実装してみたいと思います。

以下が実装例です。

See the Pen ぽよんアニメーション【ボタン編】 by koutarou mori (@koutarou-mori) on CodePen.

プリンの動きをそのまま当てはめるのは実用性に欠けるので、調整しています。

実装方法は基本プリンと同じなので、自身で調整していただいてもOKです。

よろこびくんぷるぷるしていてなんかクリックしたくなりますね！ みつたついつい触れたくなってしまう、クリック率の増加はこのような心理的な部分も含まれています。

本記事のまとめ

ここまで読んでいただきありがとうございました。

この「ぽよん」のアニメーションの変化は一から作成するのは難しいし、動きを近づけるための調整にも時間がかかります。

なので今回解説したコードをコピペしていただいて自分の理想のアニメーションの動きに調整したほうが手っ取り早くていいと思います。

「ぽよん」なアニメーションを実装したくなったらぜひ本記事の内容を参考にしてみてください！

  • Pocket
  • Hatena
  • Pinterest
  • LINE

-CSS, Web制作, アニメーション

📎📎📎📎📎📎📎📎📎📎