などの疑問や悩みを解決してまいります。
要素に動きを加えたいと思ったことはありませんか？
アニメーションなど動きを加えるとなるとJavascriptやjQueryなどのイメージがありますが、本記事ではJSは使いません！
今回はHTMLとCSSのみを使用して「ぽよん」としたアニメーションの実装方法を解説します。
完成例を見てみましょう
まずは完成例を見てみましょう。
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です。
本記事のまとめ
ここまで読んでいただきありがとうございました。
この「ぽよん」のアニメーションの変化は一から作成するのは難しいし、動きを近づけるための調整にも時間がかかります。
なので今回解説したコードをコピペしていただいて自分の理想のアニメーションの動きに調整したほうが手っ取り早くていいと思います。
「ぽよん」なアニメーションを実装したくなったらぜひ本記事の内容を参考にしてみてください！
