作るもの

画像を中心から放射状に柔らかく表示するアニメーションを作成します。

今回は @property を使用してアニメーションを作成していきます。

@property

開発者が明示的にカスタムプロパティを定義し、

• 型
• 継承の有無
• 初期値

上記を定義します。

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee; 
}

@property - CSS | MDN

作り方

考え方としては

1. 画像の上に擬似要素で背景色と同じ色の要素を配置
2. @property を用いて、中心から放射状に透明色へグラデーション
3. 結果画像が表示されるような見た目になる

上記の流れです。

@property の定義

//- 起点
@property --radial-start {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

//- 終点
@property --radial-end {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

@keyframes の定義

@keyframes radial {
  from {
    --radial-start: 0%;
    --radial-end: 0%;
  }
  to {
    --radial-start: 100%;
    --radial-end: 125%;
  }
}

画像要素 に対してのスタイル

figure.img {
  position: relative;

    &:before {
      background-image: radial-gradient(circle, transparent var(--radial-start), #fbfaf5 var(--radial-end));
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    /* .active クラスが付与された際に表示アニメーション */
    &.active:before {
      animation: radial 1.2s ease-out;
    }
}

上記でやわらかい印象で画像を表示することができます。

グラデーションの開始地点をカスタムプロパティ化して、アニメーションの開始地点をランダムに設定するのも面白いかもしれません。

/* JS側からランダムの値を算出してカスタムプロパティの値を更新 */
:root {
  --x: 0%;
  --y: 0%;
}

&:before {
  background-image: radial-gradient(circle at var(--x) var(--y), transparent var(--radial-start), #fbfaf5 var(--radial-end));
}

※応用

これをテキスト表示アニメーションに応用します。

p {
  background-image: radial-gradient(circle at 0% 0%, #000 var(--radial-start), transparent var(--radial-end));
  background-clip: text;
  color: transparent;
}

背景の要素をテキストの形でくり抜いて、背景色に対してグラデーションをかけていくことで表現します。

まとめ

案件でふんわりとした出現アニメーションを表現したくて実装しました。

これであれば実装コストも低く、少ないコードで実装ができます。

手間をかけずにやわらかい印象を出したい場合には応用の効く表現かと思います。