JavaScript | animate()でフェードイン・フェードアウトアニメーション
JavaScriptのanimate()メゾッドを使ったフェードイン・フェードアウトのアニメーションを実装するサンプルを紹介しています。
フェードインアニメーション
animate()メゾッドを利用したフェードインアニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。
See the Pen JavaScript | Fade in with animate by yochans (@yochans) on CodePen.
HTMLにはフェードインさせたい要素としてdivタグで「#item」を設置しています。
<div id="item"></div>「#item」には以下のCSSをデフォルトで指定しています。
#item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
}animate()でのフェードインには、CSS同様に透過度を指定する「opacity」を使う事が可能です。
「opacity」は初期状態の「1」から開始して完全に透過状態となる「0」で完了するように設定します。
アニメーション時間は「duration」で「3000」（ms）を指定、最後の状態で停止する為に「fill」に「forwards」を指定しています。
document.querySelector(`#item`).animate(
[
{ opacity: 1 },
{ opacity: 0 }
],
{
duration: 3000,
fill: 'forwards'
}
);繰り返し動作させたい場合は「iterations: Infinity」を、反復させたい場合は「direction: alternate」追記します。
関連：JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES
フェードアウトアニメーション
animate()メゾッドを利用したフェードアウトアニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。
See the Pen JavaScript | Duplicate an element by yochans (@yochans) on CodePen.
HTMLにはフェードアウトさせたい要素としてdivタグで「#item」を設置しています。
<div id="item"></div>フェードアウトさせる「#item」には以下のCSSを指定しています。
#item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
}animate()メゾッドでのフェードアウトには、透過度を指定する「opacity」を使う事が可能です。
「opacity」は透明の状態となる「0」から開始して「1」で完了するように設定します。
アニメーション時間は「duration」で「3000」（ms）を指定、最後の状態で停止する為に「fill」に「forwards」を指定しています。
document.querySelector(`#item`).animate(
[
{ opacity: 0 },
{ opacity: 1 }
],
{
duration: 3000,
fill: 'forwards'
}
);繰り返し動作させたい場合はオプションに「iterations: Infinity」を、反復させたい場合は「direction: alternate」追記します。