HTML要素を移動させるアニメーション
CSSではHTML要素の位置をleftプロパティ、rightプロパティ、topプロパティ、bottomプロパティなどで指定します。
JavaScriptのWeb Animations APIを使ってこれらのプロパティの値を変化させることで、HTML要素が移動するアニメーションを実装することができます。
Note
Web Aniamtion APIの基本的な使い方やKeyframeEffectオブジェクトで設定できる内容については「Web Animations APIを使う」をご覧ください。
以下の例はarticle要素のtopプロパティとleftプロパティの値を変化させることで移動するアニメーションを実装しています。
サンプルページはこちら
HTML コード例
<body>
<article id="content1">
<h1>JavaScriptレシピ</h1>
<a id="btn_start" class="btn" href="#">アニメーション開始</a>
</article>
</body>CSSでarticle要素のtopプロパティとleftプロパティの初期値を設定します。
ここではいずれも「0」で、ページ左上を起点とします。
CSS コード例
article {
position: absolute;
top: 0;
left: 0;
padding: 20px;
width: 50%;
box-sizing: border-box;
background-color: #5face7;
}
h1 {
margin: 0 0 20px;
padding: 0;
font-size: 100%;
}
a.btn {
display: inline-block;
padding: 10px 20px;
color: #fff;
font-size: 86%;
text-decoration: none;
border-radius: 5px;
background-color: #4a93cb;
}KeyframeEffectオブジェクトのコンストラクタにアニメーションの設定を指定します。
シーン1の開始地点からシーン6の終了地点まで、シーンを1つずつ進めていきます。
JavaScript コード例
window.addEventListener('DOMContentLoaded', function(){
const btn_start = document.getElementById('btn_start');
const content1 = document.getElementById('content1');
// KeyframeEffectオブジェクトのインスタンス作成
let keyframeeffect = new KeyframeEffect(
content1,
[
{ // シーン1
top: '0%',
left: '0%',
offset: 0,
easing: 'ease'
},
{ // シーン2
top: '50%',
left: '50%',
offset: 0.2,
easing: 'ease'
},
{ // シーン3
top: '80%',
left: '50%',
offset: 0.4,
easing: 'ease'
},
{ // シーン4
top: '80%',
left: '25%',
offset: 0.6,
easing: 'ease'
},
{ // シーン5
top: '50%',
left: '0%',
offset: 0.8,
easing: 'ease'
},
{ // シーン6
top: '0%',
left: '0%',
offset: 1
}
],
{
duration: 4000,
direction: 'alternate',
iterations: 2
}
);
// Animationオブジェクトのインスタンス作成
let animation = new Animation(keyframeeffect);
// ボタンが押されたらアニメーション再生
btn_start.addEventListener('click', function(e){
e.preventDefault();
animation.play();
});
});シーンが進むごとにtopプロパティとleftプロパティの値を更新していきます。
シーンごとに指定しているoffsetの値は再生時間の中における位置になります。
アニメーションの全体の再生時間はdurationで指定した4秒（4000ミリ秒）になるので、例えばシーン2の「offset: 0.2」は４０００ミリ秒の0.2にあたる800ミリ秒の地点に該当します。
同様に、シーン3の「offset: 0.4」は1600ミリ秒の地点、シーン4の「offset: 0.6」は2400ミリ秒の地点、シーン5の「offset: 0.8」は3200ミリ秒の地点、シーン6の「offset: 1」は4000ミリ秒の終了地点になります。
ここでは登場しませんが、同じ要領でrightプロパティやbottomプロパティを使った移動のアニメーションを実装することもできます。