JavaScriptでCSSアニメーションを連携させる方法！初心者でも簡単にアニメーション操作

1. CSSアニメーションとは？

1. CSSアニメーションとは？

CSSアニメーションは、HTML要素の色や位置、サイズなどを滑らかに変化させる方法です。例えばボタンが押されたときに色が変わる、画像がスライドする、といった動きを簡単に作れます。CSSでアニメーションを定義するには@keyframesというルールを使います。

.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: red;
}

この例では、マウスをボタンに乗せると青色から赤色に0.5秒かけて変化します。これはtransitionというプロパティを使った簡単なCSSアニメーションです。

2. JavaScriptでCSSアニメーションを開始・停止する方法

2. JavaScriptでCSSアニメーションを開始・停止する方法

JavaScriptを使うと、CSSクラスを動的に追加したり削除したりできます。これによりアニメーションを任意のタイミングで開始したり停止したりできます。

const box = document.querySelector('.box');
const startBtn = document.querySelector('#start');
const stopBtn = document.querySelector('#stop');

startBtn.addEventListener('click', () => {
  box.classList.add('animate');
});

stopBtn.addEventListener('click', () => {
  box.classList.remove('animate');
});

ここでanimateというCSSクラスを定義しておけば、ボタンのクリックでアニメーションの開始・停止をコントロールできます。

3. CSSアニメーションの状態をJavaScriptで監視する

3. CSSアニメーションの状態をJavaScriptで監視する

CSSアニメーションが終了したタイミングで次の処理を行いたい場合、animationendイベントを使います。例えば、アニメーションが終わったらメッセージを表示することもできます。

const box2 = document.querySelector('.box2');

box2.addEventListener('animationend', () => {
  alert('アニメーションが終わりました！');
});

このように、アニメーションの完了を検知してJavaScriptで別の処理を行うことができます。

4. JavaScriptでアニメーションの速度やタイミングを変える

4. JavaScriptでアニメーションの速度やタイミングを変える

CSSだけでは固定された時間でしかアニメーションが進みませんが、JavaScriptを使うと実行中に速度やタイミングを変更できます。例えば、style.animationDurationを使うと簡単に速度調整が可能です。

const box3 = document.querySelector('.box3');
const fasterBtn = document.querySelector('#faster');

fasterBtn.addEventListener('click', () => {
  box3.style.animationDuration = '1s'; // 1秒でアニメーション
});

これにより、ユーザーの操作に応じてアニメーションのスピードを自由に変えられます。

5. 複数のCSSアニメーションをJavaScriptで連鎖させる

5. 複数のCSSアニメーションをJavaScriptで連鎖させる

JavaScriptでは、複数のアニメーションを順番に実行することもできます。animationendイベントを使えば、前のアニメーションが終わったタイミングで次のアニメーションを開始できます。

const box4 = document.querySelector('.box4');
box4.addEventListener('animationend', () => {
  box4.classList.remove('slide');
  box4.classList.add('fade');
});

この例では、slideアニメーションが終わったらfadeアニメーションに切り替えています。こうすることで自然な連続アニメーションを作ることができます。

6. JavaScriptとCSSアニメーションで応用的な演出を作る

6. JavaScriptとCSSアニメーションで応用的な演出を作る

JavaScriptとCSSアニメーションを組み合わせると、ユーザーのスクロールやクリック、タイマーなどの条件で動的に演出を作れます。例えば、スクロールしたら画像がスライドインする効果を作ることも可能です。

window.addEventListener('scroll', () => {
  const scrollBox = document.querySelector('.scroll-box');
  if (window.scrollY > 100) {
    scrollBox.classList.add('slide-in');
  } else {
    scrollBox.classList.remove('slide-in');
  }
});

このコードでは、スクロール位置が100pxを超えるとslide-inクラスを追加してアニメーションを開始します。逆に戻るとアニメーションを停止する仕組みです。

7. JavaScriptとCSSアニメーションを組み合わせるときの注意点

7. JavaScriptとCSSアニメーションを組み合わせるときの注意点

CSSアニメーションとJavaScriptを連携する場合、クラスの切り替えタイミングやアニメーションの重複に注意する必要があります。また、ブラウザの互換性やスマホでの動作も確認すると良いです。無駄なアニメーションや長すぎるアニメーションはパフォーマンス低下の原因になるため、適切な時間設定や不要なアニメーションの停止も意識しましょう。

8. JavaScriptとCSSアニメーションの実践例まとめ

8. JavaScriptとCSSアニメーションの実践例まとめ

ここまで学んだことをまとめると、CSSで基本のアニメーションを作り、JavaScriptでその開始・停止・速度調整・連鎖・条件付き実行を行うことで、よりインタラクティブで自由度の高いアニメーションを作れるようになります。初心者でも簡単に試せるので、まずはボタンを押したときに色や位置が変わるアニメーションから練習してみると良いでしょう。

まとめ

まとめ

JavaScriptとCSSアニメーションを組み合わせることで、Webページの動きをより豊かに、インタラクティブに表現できることがわかりました。CSS単体でもアニメーションは可能ですが、JavaScriptを使うことでアニメーションの開始や停止、速度変更、順番制御、条件付き実行などを自由に操作できます。例えば、ボタンのクリックでアニメーションを開始したり、アニメーション終了後に別の処理を実行したり、スクロールやタイマーに応じて動きを変化させることができます。

具体的には、classList.addやclassList.removeを使ってCSSクラスを切り替えることでアニメーションを制御できます。また、animationendイベントを活用すると、アニメーションの完了を検知して次の動作を実行することが可能です。さらに、style.animationDurationやstyle.transitionDurationを変更することで、ユーザーの操作に応じてアニメーション速度を調整できる点も非常に便利です。

複数のアニメーションを順番に実行する場合や条件付きで動かす場合には、JavaScript側で状態管理やイベントリスナーを工夫する必要があります。例えば、スクロール位置に応じて要素をスライドインさせる演出や、クリックイベントでフェードイン・フェードアウトを組み合わせることで、ユーザーにとって自然で魅力的な体験を提供できます。

注意点としては、アニメーションの重複や長すぎるアニメーションはブラウザのパフォーマンス低下につながるため、無駄なアニメーションを避け、必要な場合のみJavaScriptで制御することが重要です。また、スマートフォンや古いブラウザでの動作確認も忘れず行うことで、幅広いユーザーに対応したサイトを作成できます。

ここで一つ、簡単なサンプルコードでアニメーション制御の復習をしてみましょう。

 const myBox = document.querySelector('.my-box'); const startBtn = document.querySelector('#startBtn'); const stopBtn = document.querySelector('#stopBtn');
// アニメーション開始
startBtn.addEventListener('click', () => {
myBox.classList.add('animate');
});

// アニメーション停止
stopBtn.addEventListener('click', () => {
myBox.classList.remove('animate');
});

// アニメーション終了を検知してメッセージ表示
myBox.addEventListener('animationend', () => {
console.log('アニメーションが完了しました。');
});

上記のコードでは、ボタン操作でアニメーションを開始・停止し、アニメーション終了時にログを出力する基本的な連携方法を示しています。初心者でも簡単に動作を確認でき、さらに発展させて連鎖アニメーションや条件付きアニメーションを作る土台になります。