CSS | filterにtransformを反映させる方法

2020-09-10CSS フィルター,CSS

CSSのfilterプロパティをマウスホバー時に、適用または解除、変更したいケースがあります。

filterプロパティにtransitionでアニメーション時間を設定するには、transitionにfilterまたはallを指定することで反映させることが可能です。

transition: filter 0.5s;

transition: all 0.5s;

filterにtransformを反映させる動作サンプル

filterにtransformを反映させた場合の動作サンプルです。

このサンプルでは、マウスホバー時に適用しているfilterプロパティを解除しています。

See the Pen CSS filter hover anim by yochans (@yochans) on CodePen.

サンプルコード

<div class="container">
<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
</div>

.container img{
	width:300px;
	filter: sepia(1);
  transition: filter 0.5s ease;
}

.container img:hover{
	filter: none;
}

次のサンプルでは、マウスホバー時にfilterプロパティを反映させています。

See the Pen CSS filter hover anim by yochans (@yochans) on CodePen.

サンプルコード

<div class="container">
<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
</div>

.container img{
	width:300px;
  transition: filter 0.5s ease;
}

.container img:hover{
	filter: sepia(1);
}