JavaScript | animate()でバウンドアニメーション
animate()メゾッドを使ってテキストや要素をバウンド（弾む）させるJavaScriptアニメーションの実装サンプルを紹介しています。
バウンドアニメーション
animate()メゾッドを利用したバウンドアニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。
See the Pen JavaScript | drop animation with animate by yochans (@yochans) on CodePen.
HTMLにはバウンドアニメーションさせたい要素としてdivタグで「#item」を設置しています。
<div id="item"></div>弾むアニメーションさせるHTML要素「#item」には以下のCSSを指定しています。
#item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
}サンプルではanimate()メゾッドでテキストや要素が弾んでいるようにみせるのに「transform」プロパティで「translateY()」と「scale()」の値に変化をつけています。
ターゲットの要素が「position」プロパティで「absolute」や「fixed」他、絶対値での位置指定を可能にしている場合は「top」を調節した落下アニメーションも指定可能です。
document.querySelector(`#item`).animate(
[
{ transform: 'translateY(0) scale(1)' },
{ transform: 'translateY(-50px)' },
{ transform: 'scale(1)' },
{ transform: 'scale(1.2, 0.9)' },
{ transform: 'translateY(0) scale(1)' }
],
{
duration: 1000,
iterations: Infinity
}
);CSSアニメーションキーフレームでの％（パーセント）指定の代わりになっている「offset」プロパティを使う事でより細かくアニメーションのタイミングを指定する事も可能です。