放射状フェードイン ~CSS~
作るもの画像を中心から放射状に柔らかく表示するアニメーションを作成します。今回は @property を使用してアニメーションを作成していきます。@property開発者が明示的にカスタムプロパティを定義し、型継承の有無初期値上記を定義します。@property --property-name {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}@property - CSS | MDN作り方考え方としては画像の上に擬似要素で背景色と同じ色の要素を配置@property を用いて、中心から放射状に透明色へグラデーション結果画像が表示されるような見た目になる上記の流れです。@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;
}背景の要素をテキストの形でくり抜いて、背景色に対してグラデーションをかけていくことで表現します。まとめ案件でふんわりとした出現アニメーションを表現したくて実装しました。これであれば実装コストも低く、少ないコードで実装ができます。手間をかけずにやわらかい印象を出したい場合には応用の効く表現かと思います。
