Web

CSS: Individual transform properties が便利

投稿日:

Finer grained control over CSS transforms with individual transform properties というページで紹介されていたのですが、CSS の Individual transform properties というプロパティが便利そうでした。

CSS でアニメーションを表現する場合、今まではこんな感じで書いていました(先程のページからの引用です)。

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

ここでは、transform の中に translate{X,Y}, rotate, scale を並べて記述せねばならず、それぞれの動きを別々のタイミングで変化させようと思うと、かなり記述が面倒になります。

これを改善するために、現在では translate{X,Y}, rotate, scale (これが Individual transform properties です) などのプロパティをそれぞれ単独で(transform なしで)記述できるようになったとのことです。

先程のコードを書き換えるとこうなります(こちらも先程のページからの引用です)。

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

@keyframes 毎に、translate, scale, rotate を分けています。このとき、transform は必要ありません。これによって、記述が楽になるだけでなく、コードを読んで動きを理解する側も楽になります。3つの動作のうちのどれかだけなくそうと思ったら、animation プロパティからそこだけ消せば済みます。

これは、嬉しい機能です。

参考

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

<pre><code>タグが、モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」を引き起こしていました。

Web Vitals

Webページ読み込み高速化に対する<script>タグのdefer/async属性について

Webページ読み込み高速化に対する<script>タグのdefer/async属性について書いています。

Web Programming

Import maps の使い方

Import maps の使い方について説明します。

Web

Webページを検証する各種サービス

Webページを検証する各種サービスを紹介します。

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。