押すと潰れて、話すと自然にぷにぷに弾みながら戻るアニメーションをcssのtransitionとアニメーションで実装。jQueryはcss着脱のイベントハンドラとしてのみ使用。
結論
See the Pen
css-puni-animation by 4est (@4est001)
on CodePen.
解説
全体の挙動
- 対象を押下で.push-puniをつけてじわじわ沈むように
- 離すと.push-puniを外し.start-puniをつけて弾むアニメーション
- .start-puniのアニメーションが終わると.start-puniも外す
jQueryについて
長押しで潰れ、離すと弾む。
潰れている最中にマウスポインタが外れても弾む。
連打でプニプニするために、押してすぐ離すとアニメーション中断=>再開でぷよぷよする。
cssについて
1, wrapper
真ん中に持ってくるためにflexを使っているだけ
2, animationとtransiton
animation要素によるアニメーションとtransition要素によるアニメーションは独立しているっぽい
あくまでanimationは実行中のみの状態遷移であり、transitionでの動きはanimationが途絶えると描画される。
3, .start-puniにtransition:0sも貼っている理由
- 対象を押下し.push-puniがついた状態で対象の状態はtransform: scale(1.2,.8) translateY(20%);の潰れた状態になる。
- 先述の通り、潰れた状態はcssを剥がして.start-puniのanimationの描画を経ても保存されており、animation終了後に潰れ=>元の形に戻る挙動をしてしまう。
- その過程を描画させないために0秒で状態を遷移させている
4, まんじゅうっぽい形の作り方
border-radiusは左上,右上.右下,左下のx軸半径 / 左上,右上.右下,左下のy軸半径として個別に設定できる。
codepen上のまんじゅうは上２つの角をx軸半径100px, 半径60pxの楕円,
下２つの角をx軸半径40px, y軸半径30pxの楕円で描画している。
5, 自然に見せるポイントで意識したこと
- 弾性体の振動も高校でやった振り子と一緒で振幅依存性は無視できるものとする(つまり、縮んで伸びて元の形に戻るまでのフレーム数は一定)
- ただし最初の部分だけ早くうごかしてぷにった時の爽快感を増している
- 縮んだ分だけY軸も下に動かし重力感をだす
動機
かわいいやん