2025年10月29日 / 最終更新日時 : 2025年10月29日 Eiji CSS

animationと@starting-style

animation

@starting-style

css menu

animation

animation-name アニメーション・ネームアニメーションの名前
animation-duration アニメーション・デュレーションアニメーションが始まって終わるまでの時間を指定
animation-timing-function アニメーション・タイミング・ファンクションアニメーションの進行の度合いを指定
animation-delay アニメーション・ディレイアニメーションが始まる時間を指定
animation-iteration-count アニメーション・イテレーション・カウントアニメーションの繰り返し回数を指定
animation-direction アニメーション・ディレクションアニメーションの再生方向を指定
animation-fill-mode アニメーション・フィル・モードアニメーションの開始前、終了後のスタイルを指定
animation-play-state アニメーション・プレイ・ステートアニメーションの再生・停止を指定

animation アニメーション上記、8つのプロパティを一括で指定できる、ショートハンドプロパティ

ショートハンド

rotate 1s 4s infinite;
1.プロパティ名 | 2.再生時間 | 4.待ち時間 | 5.繰り返し回数

.Shuriken {
  ・・・・
  animation: rotate 1s 4s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Silence Design Works

text-pop-up-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1s
1.name | 2.再生時間 | 3.進行の度合い | 6.再生方向 | 4.待ち時間

tracking-in-contract-bck 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards
1.name | 2.再生時間 | 3.進行の度合い | 6.再生方向

.company {
・・・・
animation: text-pop-up-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1s, tracking-in-contract-bck 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@starting-style

アニメーション化させる要素に対して開始時（開く前）のスタイルを設定するアットルール
display:none;からのフェードイン・フェードアウトが可能
visibility: hidden;、opacity:0; だと表示は消えてもクリック領域などが残る場合の対策に

Dialog

HTML

<div class="dia">
  <dialog>
    <p>Dialogエリア jsを使えば背景クリックでも終了</p>
    <form method="dialog">
      <button>Closed</button>
    </form>
  </dialog>
  <button onclick="document.querySelector('dialog').showModal()">Open Dialog</button>
</div>

CSS

.dia {
  & dialog[open] {
    translate: 0 0;
    transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
    @starting-style {
      translate: 0 100vh;
    }
    &::backdrop {
      background: rgba(79, 77, 200, 0.3);
    }
  }
}

JS 背景（::backdrop）クリックで閉じる場合

const button = document.querySelector("button");
const modal = document.querySelector("dialog");
button.addEventListener("click", () => {
  modal.showModal();
});
modal.addEventListener("click", ({ clientX, clientY }) => {
  const { top, left, width, height } = modal.getBoundingClientRect();
  const inDialog = top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width;
  if (!inDialog) modal.close();
});

display:none

アニメーション後display:none;が可能

Test

HTML

<button id="btn">消える手裏剣</button>
<div id="trans" class="test_area">Test</div>

JS ボタン操作トリガー

document.getElementById("btn").addEventListener("click", (e) => {
document.getElementById("trans").classList.toggle("active");
});

CSS

.test_area {
  background: linear-gradient(45deg, #757575 0%, #9e9e9e 45%, #e8e8e8 70%, #9e9e9e 85%, #757575 90% 100%);
  height: 220px;
  width: 220px;
  clip-path: polygon(0 0, 0 0, 30% 50%, 0 100%, 0 100%, 50% 70%, 100% 100%, 100% 100%, 70% 50%, 100% 0, 100% 0, 50% 30%);
}
.test_area.active {
  transform: translateX(60vw) rotate(1800deg);
  display: none;
  opacity: 0;
  transition: transform 3s, opacity 3s, display 3s allow-discrete;
  @starting-style {
    opacity: 0;
  }
}

display:none

3秒後にアニメーションを開始し、1秒かけて滑らかに変化させる（ease-in-out）

3s start

HTML

<div class="sam31">3s start</div>

CSS

.sam31 {
  transition: background-color 1s ease-in-out 3s, color 1s ease-in-out 3s, width 1s ease-in-out 3s;
  background-color: #111;
  @starting-style {
    background-color: #ddd;
    color: #333;
    width: 20%;
  }
}

pure css menu

displayをトランジション可能にするtransition-duration : allow-discrete; transition-duration : 遷移するまでにかかる時間の指定
allow-discrete : 離散アニメーションプロパティのトランジションが開始
プロパティ名 | 再生時間 | イージング関数 | 待ち時間
プロパティ名 | 再生時間 | 振る舞い（allow-discrete / normal）
例）transition: display 4s allow-discrete;

category_1
category_2
category_3
category_4
- category_4_1
- category_4_2

HTML

<nav class="nav">
  <ul>
    <li>
      <a>category_1</a>
      <div>
        <ul>
          <li>
            <a>category_1_1</a>
          </li>
          <li>
            <a>category_1_2</a>
          </li>
          <li>
            <a>category_1_3</a>
          </li>
          <li>
            <a>category_1_4</a>
          </li>
        </ul>
      </div>
    </li>
    <li><a>category_2</a>..省略..</li>
  </ul>
</nav>

CSS

nav {
  & > ul {
    position: relative;
    & > li {
      &:hover > div li {
        display: block;
        opacity: 1;
        @starting-style {
          opacity: 0;
        }
      }
      & > div {
        position: absolute;
        inset: calc(100% + 2px) auto auto 0;

        & li {
          display: none;
          opacity: 0;
          transition: opacity 0.3s, display 0.2s allow-discrete;
        }
      }
    }
  }
}

cubic-bezier ジェネレーター

カテゴリー: CSS

タグ: CSS