段階的なアニメーション

はじめに

この実験では、CSS を使って要素のリストに対して段階的なアニメーション効果を作成する方法を学びます。opacity と transform プロパティを使って要素を透明にし、最も右まで移動させます。そして、transition-delay と :checked 疑似クラスセレクタを使って、要素を段階的に表示させて表示領域にスライドさせます。この実験が終わるとき、あなたは魅力的なビジュアルなアニメーションを Web ページに作成できるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

VM 内には既に index.html と style.css が用意されています。

このコードは、リストの要素に対して段階的なアニメーションを作成します。そのためには以下のことを行います。

opacity: 0 と transform: translateX(100%) を設定することで、リスト要素を透明にして最も右まで移動させます。
transition-delay を除き、リスト要素に同じ transition プロパティを指定します。
インラインスタイルを使って各リスト要素に --i の値を指定します。これは段階的な効果を作成するための transition-delay に使用されます。
チェックボックスに対して :checked 疑似クラスセレクタを使ってリスト要素をスタイリッシュにします。要素を表示させて表示領域にスライドさせるには、opacity を 1 に、transform を translateX(0) に設定します。

この効果を達成するための HTML と CSS のコードは以下の通りです。

<div class="container">
  <input type="checkbox" name="menu" id="menu" class="menu-toggler" />
  <label for="menu" class="menu-toggler-label">Menu</label>
  <ul class="stagger-menu">
    <li style="--i: 0">Home</li>
    <li style="--i: 1">Pricing</li>
    <li style="--i: 2">Account</li>
    <li style="--i: 3">Support</li>
    <li style="--i: 4">About</li>
  </ul>
</div>

.container {
  overflow-x: hidden;
  width: 100%;
}

.menu-toggler {
  display: none;
}

.menu-toggler-label {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.stagger-menu {
  list-style-type: none;
  margin: 16px 0;
  padding: 0;
}

.stagger-menu li {
  margin-bottom: 8px;
  font-size: 18px;
  opacity: 0;
  transform: translateX(100%);
  transition:
    opacity 0.3s cubic-bezier(0.75, -0.015, 0.565, 1.055),
    transform 0.3s cubic-bezier(0.75, -0.015, 0.565, 1.055);
}

.menu-toggler:checked ~ .stagger-menu li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.055s * var(--i));
}

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたは段階的なアニメーションの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

リスト要素の段階的な CSS アニメーション

はじめに

段階的なアニメーション

まとめ