Lism Tips

has--transition（なめらかに変化させる）

has--transition は、色や影が変わるときにパッと切り替えず、少しずつ変化させるクラスです。変数と -hov との組み合わせを説明します。

has--transition は、要素の見た目が変わるときに、少しずつなめらかに変化させるクラスです。transition（トランジション）は「移り変わり」という意味の CSS の機能です。

どんなときに使う？#

  • マウスを乗せたとき（hover）の色の変化を、ふわっと見せたいとき
  • カードに影が付いたり、少し浮き上がったりする動きを、なめらかにしたいとき

ふつうは、マウスを乗せたときの変化を決める -hov のクラスといっしょに使います。

使い方#

-hov:-bgc（マウスを乗せると背景色が変わる）と has--transition を同じ要素に付けます。下の箱にマウスを乗せてみてください。

表示例

マウスを乗せてください
html
<div class="has--transition -hov:-bgc -p:20 -bd" style="--hov-bgc: var(--base-2); --duration: 0.5s">マウスを乗せてください</div>

has--transition を外すと、色がパッと切り替わります。

専用の変数#

変数 役割 初期値
--duration 変化にかける時間 var(--transition-duration, 0.25s)
--ease 変化の速さの付け方（はじめゆっくり、など） ease
--delay 変化が始まるまでの待ち時間 0s
--transitionProps ゆっくり変化させるプロパティ（見た目の種類）の一覧 下を参照

--transitionProps の初期値は次のとおりです。

text
color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter

色・影・透明度・transform（動かす・回す・大きさを変える）・filter（ぼかしなど）の仲間だけが入っています。

補足

初期値を all（すべて）にしていないのには理由があります。all だと、ページを開いたときやレイアウトが変わったときにも、思わぬ動き（ちらつき）が出やすくなるからです。

ヒント

実際に変える見た目だけを --transitionProps に書くのがおすすめです。

html
<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>

影と浮き上がりを組み合わせる#

-hov:-bxsh（影を付ける）と -hov:-transform（上へ少し動かす）に has--transition を足すと、カードがなめらかに浮き上がります。

表示例

マウスを乗せると浮き上がります
html
<a href="#" class="is--boxLink has--transition -hov:-bxsh -hov:-transform -bd -p:20">マウスを乗せると浮き上がります</a>

しくみ#

css
.has--transition {
  --duration: var(--transition-duration, 0.25s);
  --ease: ease;
  --delay: 0s;
  --transitionProps: color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter;
  transition: var(--duration) var(--ease) var(--delay);
  transition-property: var(--transitionProps);
}

React・Astro で書く場合#

hasTransition に文字列を渡すと、その文字列が --transitionProps になります。

jsx
<Lism hasTransition="color" hov={{ c: 'red' }}>Example</Lism>

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧