CSS3 @keyframes を使用したスライドアップ アニメーションが機能しないのはなぜですか?

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

CSS3 を使用すると、フェードアウト効果を簡単に実装して、ユーザー エクスペリエンスを向上させることができます。ただし、スライド アニメーションが機能しないという問題が発生した場合は、その理由を調べてみましょう。

問題を理解する

スライドアップ アニメーションを作成しようとしています@キーフレームを使用します。ただし、アニメーションは発生しません。これをデバッグするために、提供されたコードを詳しく調べます。

<code class="css">.dummy-wrap {
  animation: slideup 2s;
}</code>

このコードは、.dummy-wrap クラスがスライドアップ アニメーションを 2 秒間実行する必要があることを示しています。 @keyframes ブロックはアニメーションの動きを定義します:

<code class="css">@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}</code>

スライド アニメーションのトラブルシューティング

キーフレームを調べると、要素の位置が最後の 25 個だけ変化していることがわかります。アニメーションの %。要素は先頭から始まるため: 0px;先頭: -20px; で終了すると、基本的に瞬時に先頭: -20px; に移動し、突然の「スライドアップ」効果が生じます。

フェードアウトの代替ソリューション

変換を使用する代わりに、不透明度を使用してフェードアウト効果を実現できます。これを実装する方法は次のとおりです:

<code class="css">.hidden {
  opacity: 0;
  transition: opacity 2s;
}</code>

このテクニックは要素の不透明度を徐々に減らし、2 秒かけて目に見えるフェードアウト効果を作成します。

追加の詳細

コードの最初のバージョンでは、要素の位置がアニメーションの最後の 25% でのみ変更されたため、突然の「スライドアップ」効果が発生しました。不透明度に切り替え、継続時間全体にわたってトランジションすることで、スムーズなフェードアウト効果を実現します。

以上がCSS3 @keyframes を使用したスライドアップ アニメーションが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。