@initial

2023.06.03

@initialは、初期状態を設定できるCSSの新機能。（※プロパティの初期値を設定するinitialとは異なる）
例えば、現在のCSSではtransitionでdisplayは機能しないが、CSSの新機能を使用すると、CSSだけで表示・非表示のアニメーションを実装できるようになる。
@initialは仕様が確定している状態ではない（2023/4/27現在）。前述したようにinitialプロパティと混同しやすいなど懸念事項があるため、変更される可能性もある。現在@initialが動作するブラウザは、Chrome Canaryのみとなっている。

使用例：チェックボックスで要素の表示／非表示

以下の例は、チェックボックスをオンにすると、要素がdisplay: none;からdisplay: block;にトランジションするデモである。オフにすると非表示となる。
@initialでアニメーション化前の状態を設定することが重要なポイント。

.display-on-check {
  opacity: 0;
  display: none;
  
  /*  opacityとdisplayの両方を設定 */
  transition: opacity 0.5s, display 0.5s;
}

/* チェックしたときのアクティブな状態 */
:checked + .display-on-check {
  opacity: 1;
  display: block;
}

/* 初期状態を設定 */
@initial {
  :checked + .display-on-check {
    opacity: 0;
  }
}

使用例：要素のポップオーバー

:popoverと@initialを使用したポップオーバー。あるアイコンをタップすると、それぞれのポップオーバーが表示される。

  1. :popover-openと@initialを使用して、オープンする前の初期状態のスタイルを設定する
  2. :popover-open内で、オープン状態を設定する
  3. ベースとなる要素で、アニメーション先を設定する
.settings-popover {
  &:popover-open {
    /*   初期状態を設定   */
    @initial {
      transform: translateY(20px);
      opacity: 0;
    }
    
    /*   オープン状態   */
    transform: translateY(0);
    opacity: 1;
  }
  
  /*   オープン後、クローズ状態   */
  transform: translateY(-50px);
  opacity: 0;

  transition: transform 0.5s, opacity 0.5s, display 0.5s;
}

【参考】
https://coliss.com/articles/build-websites/operation/css/css-transition-display.html

inserted by FC2 system