CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSアニメーションで隠れた要素を滑らかに表示する方法

CSSアニメーションを活用すると、画面上に隠れている要素を滑らかに表示させることができます。マウスホバーなどのユーザー操作をトリガーにして、@keyframesによるアニメーションやopacityのトランジションを組み合わせれば、動きのある魅力的なインターフェースを手軽に実装できます。

以下の例では、要素にカーソルを合わせると、非表示になっていた要素がアニメーションとともに現れるデモを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<style>
.item {
   position: relative;
   perspective: 1000px;
}
.demo, .hidden-one {
   background: lightgreen;
   box-shadow: 0 5px 12px rgba(0,0,0,0.6);
}
.item:hover .hidden-one{
   animation: yoyo 1.4s backwards ease;
}
.item:hover .demo {
   animation-name: yo 1s ease;
}
.demo {
   position: absolute;
   height: 150px;
   width: 150px;
   background-color: firebrick;
   border-radius: 50%;
   left: 100px;
   top: 50px;
   z-index: 2;
}
.hidden-one {
   background-color: #880;
   border-radius: 3px;
   height: 120px;
   width: 55px;
   position: absolute;
   left: 280px;
   top: 140px;
   opacity: 0;
   transition: opacity 0.8s;
}
@keyframes yoyo {
   0% {
      top: 140px;
      opacity: 0;
      left: 70px;
      z-index: 1;
   }
   50% {
      left: 12px;
      opacity: 1;
      z-index: 2;
      top: 140px;
   }
   100% {
      opacity: 1;
      left: 150px;
      z-index: 3;
   }
}
@keyframes yo {
   0% {
   }
   30% {
      transform: rotate3D(-1,1,0.1,10deg) scale(1.05);
   }
   50% {
      transform: rotate3D(1,-1,0.1,10deg) scale(1.05);
   }
   100% {
   }
}
</style>
<body>
<div class="item">
<div class="hidden-one"></div>
<div class="demo"></div>
</div>
</body>
</html>

実行結果

このコードをブラウザで開くと、次のように表示されます。

CSSアニメーションで隠れた要素を滑らかに表示する方法

CSSアニメーションで隠れた要素を滑らかに表示する方法

CSSアニメーションで隠れた要素を滑らかに表示する方法

ポイント解説

  • .item:hover .hidden-one：親要素にホバーした瞬間に、隠れていた要素へアニメーションを適用します。
  • @keyframes yoyo：top・left・opacity・z-indexを段階的に変化させることで、要素が移動しながら徐々に姿を現す演出を実現しています。
  • transition: opacity 0.8s：アニメーション前後でも透明度がなめらかに切り替わるよう設定しています。
  • @keyframes yo：rotate3D()とscale()を組み合わせ、赤い円に立体的な揺れの動きを加えています。

  1. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方

  2. CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

    CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。 隣接兄弟結合子（+）とは 隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは 一方、2つ