2020.09.07

HTML・CSS

animation-fill-modeの指定について

animation-fill-modeプロパティはCSSアニメーション実行後、対象要素にどのようなスタイルを適用するか設定します。animation-fill-modeの初期値はnoneのため、何も指定しなければ元のスタイルが適用されます。例えば下記の場合、クラス名caption_txtの透明度はCSSアニメーション実行後、0に戻ってしまいます。

a .caption_txt {
	opacity: 0;
}
a:hover .caption_txt {
	animation: show 0.2s linear 0s;
}
@keyframes show{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

透明度を0に戻さず、CSSアニメーションの最後のキーフレームのスタイルを保持するにはanimation-fill-mode: forwards;を指定します。

a .caption_txt {
	opacity: 0;
}
a:hover .caption_txt {
	animation: show 0.2s linear 0s;
	animation-fill-mode: forwards;
}
@keyframes show{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

またはクラス名caption_txtの元のスタイルで設定されているopacity: 0;を削除します。これならanimation-fill-mode: forwards;の指定がなくてもCSSアニメーションの最後のキーフレームのスタイルが保持されます。表示・非表示はopacityの代わりにdisplayで制御しています。

a .caption_txt {
	display: none;
}
a:hover .caption_txt {
	display: block;
	animation: show 0.2s linear 0s;
}
@keyframes show{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

関連記事

2021.07.06

HTML・CSS

Photoshopのドロップシャドウをbox-shadowプロパティで適用

Photoshopのレイヤースタイルで作成したドロップシャドウを、box-shadowプロパティで適用します。デモページはこちら box-shadowプロパティ…

2024.06.14

HTML・CSS

90°回転させた要素をブロック要素内右側に収めるtransform-originの設定

右上に配置した長方形の要素を90°回転させた時に、親のブロック要素内に収めるtransform-originの設定です。デモページはこちら htmlは以下のよう…

2020.12.28

HTML・CSS

CSSロードアニメーションの実装【円の一部分の色を回転】

デモページはこちら 円の一部分の色が回転する動作のCSSロードアニメーションを実装します。ローダーの見た目は全てCSSで実装するため、svgは使用しません。 h…

2020.06.27

HTML・CSS

iOSのブラウザでセレクトボックスの文字を省略せずに表示

iOSのブラウザではセレクトボックスに長いテキストの選択肢がある場合、途中で省略して表示されます。省略記号「…」が付いて選択肢が最後まで読めません。これを全て表…

2024.09.10

HTML・CSS

backdrop-filter: blurとfilter: blurの違い

backdrop-filterプロパティのblurとfilterプロパティのblurを比較して違いを確認します。デモページはこちら 共通のCSSは以下になります…

上に戻る