CSS3 でフェードアウト効果を実現する方法: キーフレーム アニメーションとトランジション?

CSS3 トランジション - フェードアウト効果

CSS3 では、キーフレーム アニメーションを使用してフェードアウト効果を実現できます。ただし、目的の効果を達成するには、アニメーション設定が正しく構成されていることを確認することが重要です。

提供されたコードでは、要素を垂直に移動する上部のプロパティがアニメーション化されているため、スライドアップ アニメーションが機能しません。ページから外れました。フェードアウト効果を実現するには、代わりに不透明度プロパティをアニメーション化する必要があります。コードの更新バージョンは次のとおりです。

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

代わりに、CSS3 トランジションを使用したより簡潔なアプローチも利用できます。

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

このアプローチを使用して要素をフェードアウトするには、次のコードを追加するだけです。隠しクラスを要素に追加します:

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

これにより、要素が 2 秒かけて不透明度: 0 に遷移し、フェードアウト効果が作成されます。要素が非表示になる前にフェードアウト アニメーションが完了できるように、visibility: hidden が遅延して追加されることに注意してください。

以上がCSS3 でフェードアウト効果を実現する方法: キーフレーム アニメーションとトランジション?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。