CSS3アニメーションの終了状態を変更しないようにする方法

導入

CSS3 アニメーションは Web デザインに豊かなダイナミック効果をもたらし、ページをより鮮やかで魅力的なものにします。ただし、アニメーションが終了したときに、初期状態に戻るのではなく、最終状態を維持したい場合があります。この記事では、この効果を実現し、アクションの終了時にアニメーションがこの状態を確実に維持するためのいくつかの方法を紹介します。

方法 1: animation-fill-mode属性を使用する

animation-fill-modeプロパティは、再生前後のアニメーションのスタイルを制御するために使用されます。このプロパティを設定すると、アニメーション終了時に最終状態を維持する効果が得られます。

属性値

例

。要素 {
  アニメーション: myAnimation 2s イーズインアウト;
  アニメーションフィルモード: 順方向;
}
@keyframes myAnimation {
  0% {
    変換:translateX(0);
  }
  100% {
    変換:translateX(100px);
  }
}

この例では、 .element要素は、アニメーションが終了した後も、 transform: translateX(100px)状態のままになります。

方法 2: animationendイベントを使用する

JavaScript を通じてanimationendイベントをリッスンすることで、アニメーション終了時に要素のスタイルを手動で設定し、アニメーションの終了状態を維持できます。

例

<div class="element"></div>

 。要素 {
  幅: 100ピクセル;
  高さ: 100ピクセル;
  背景色: 赤;
  アニメーション: myAnimation 2s イーズインアウト;
}
@keyframes myAnimation {
  0% {
    変換:translateX(0);
  }
  100% {
    変換:translateX(100px);
  }
}

 const 要素 = document.querySelector('.element');
element.addEventListener('アニメーション終了', () => {
  element.style.transform = 'translateX(100px)';
});

この例では、アニメーションが終了すると、JavaScript コードによって要素のtransformプロパティがtranslateX(100px)に設定され、アニメーションの終了状態が維持されます。

方法 3: transition属性を使用する

transitionプロパティは主にトランジション効果に使用されますが、これを上手に利用することでアニメーション終了時に最終状態を維持する効果も得ることができます。

例

<div class="element"></div>

 。要素 {
  幅: 100ピクセル;
  高さ: 100ピクセル;
  背景色: 赤;
  トランジション: トランスフォーム 2 のイーズインアウト;
}
.element.animate {
  変換:translateX(100px);
}

 const 要素 = document.querySelector('.element');
element.classList.add('アニメーション');

この例では、 animateクラスを追加することにより、要素のtransformプロパティは初期状態からtranslateX(100px)に遷移し、遷移終了後もその状態を維持します。

要約する

CSS3 アニメーションの終了状態を変更しないようにするには、 animation-fill-modeプロパティの使用、 animationendイベントのリッスン、 transitionプロパティの使用など、さまざまな方法があります。各方法には適用可能なシナリオがあり、開発者は特定のニーズに応じて適切な方法を選択できます。

この記事が、実際の開発で CSS3 アニメーションをより適切に適用し、必要な動的効果を実現するための明確な理解と実践的なガイダンスを提供できれば幸いです。

CSS3 アニメーションの終了状態を変更しないようにする方法に関するこの記事はこれで終わりです。CSS3 アニメーションの終了状態を変更しないようにする方法の詳細については、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。今後は downcodes.com をサポートしてください。