×

アットルール

アットルールは CSS の文のうち、CSS の動作を既定するものである。例えば、

• @media…メディアクエリの条件を満たす端末で読み込まれた場合にこれの中身が適用される、条件付きグループルールだ。
• @keyframes…CSS アニメーションシーケンスの中間段階に関する指定を記述する。
• @supports…ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループルールだ。

×

animation-fill-mode:

animation-fill-mode は CSS のプロパティで、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定するもの。

値は、none、forwards(対象は実行の最後のキーフレームで設定された計算値を保持)、backwards(最初の適切なキーフレームで定義された値を対象に適用される)、both(forwards と backwards の両方の既定に従う)。

×

:is()

:is() を使うと、複数のセレクタをまとめて記述することができる。

使い方の例は、下記の通り。

.example-1 a, .example-2 a, .example-3 a{
  color: gold;
}
/* 上のここまでとここから下は同義 */
:is(.example-1, .example-2, .example-3) a{
  color: gold;
}

×

animation-iteration-count

animation-iteration-count は、CSS で作成したアニメーションの繰り返す回数を指定するためのプロパティであり、任意の回数分のアニメーションを反復させることができる。

animation-iteration-count:2; /* 2 回 */

×

@layer

@layer utilities {
  /* utilities という名前のレイヤーを作成する */
}

@layer は、3 つの方法のうちの 1 つでカスケードレイヤーを作成するために使用される。カスケードレイヤーとは、CSSのスタイルをレイヤー（階層）に分けて管理し、レイヤー単位で優先順位を設定できる機能である。カスケードレイヤーは、スタイルの優先順位をレイヤーとして管理できるようにしたCSSのアットルールだ。CSSの歴史の中で非常に重要な強化機能であり、CSSの優先度に加え、CSS定義をいくつかのレイヤーに分け、レイヤー間の優先度を制御することができる。

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

×

view()

view() 関数は、ユーザーのスクロールに連動して要素を動かすために使用される。この関数は、アニメーションさせたい要素の animation-timeline に使用される。

animation-timeline: view();

×

animation-duration:

animation-duration は CSS のプロパティで、 1 回のアニメーション周期が完了するまでの所要時間を設定する。animation-delayプロパティの値には、アニメーションの開始を遅らせる時間を指定する。

animation-duration: 750ms; /* 1000ms は 1 秒 */

animation は CSS の一括指定プロパティで、スタイルの間のアニメーションを適用する。これは animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の一括指定である。

×

transition-property

• transition-property：プロパティ名（初期値：all）
• transition-duration：アニメーションの開始から終了までの時間（初期値：0）
• transition-timing-function：アニメーションの仕方（初期値：ease）
• transition-delay：アニメーション開始を遅らせる時間（初期値：0）

×

:root

:root は CSS の擬似クラスで、文書を表すツリーのルート要素を選択する。

:root はグローバルの CSS 変数(グローバル変数とは、宣言することであらゆるところで使用できる変数のことを言う)を宣言するのに便利である。以下は使用例。

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}