【CSS】interpolate-sizeプロパティを使用してみる

2025.06.20　Posted by Coding_team

Webプログラミング

こんにちは、クリエイターブログです。今回はCSSのinterpolate-sizeプロパティを紹介したいと思います。

このプロパティを用いることによって、従来transitionプロパティで一部アニメーションできなかった個所をアニメーションさせることができます。

とても簡単で便利で知っていて損は無いので是非ご覧下さいませ。

はじめに
- ブラウザ対応状況
動作確認
- HTML
- CSS
おわりに

はじめに

interpolate-sizeプロパティを用いると何が嬉しいのかと言うと、height: auto;など値をautoにしたときにアニメーション出来なかった部分をアニメーションさせることが可能になります。

従来はheight: auto;などの個所にtransitonプロパティを指定しても効果はありませんでした。

これだけで一度でも経験したことがある人は期待で胸が膨らむかと思います。

ブラウザ対応状況

まずは気になるブラウザの対応状況を説明しますので以下の参考サイトをご確認くださいませ。

→CSS property: interpolate-size | Can I use… Support tables for HTML5, CSS3, etc

Safari、Firefoxなどはまだ対応していませんのでご注意ください。

動作確認

interpolate-sizeプロパティを使用して簡単なDEMOを用意しましたのでまずそちらをご覧ください。

HTML、CSSのみで作成した文章の途中まで見せる簡単なアコーディオンとなります。

→DEMOはこちら

Chorome、Firefox両ブラウザで開いて動作を確認してみるとChoromeの方はぬるっと開きますね。

Firefoxの方は従来の動きとなります。

ではソースの説明をしていきます。

HTML

<div class="accodion_wrap">
	<input type="checkbox" id="trigger01" class="checkbox">
	<label for="trigger01" class="trigger">開閉する</label>
	<div class="accordion">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

</div>

従来のHTML・CSSのみでアコーディオンを作る場合に良く用いるinput要素を利用したシンプルな構造となります。

ここは特に解説することも無いでしょう。

CSS

:root {
	interpolate-size: allow-keywords; //ここで設定
}

.accodion_wrap {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}

.accodion_wrap .checkbox {
	display: none;
}

.accodion_wrap .trigger {
	position: absolute;
	bottom: 0;
	left: calc(50% - 100px);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 50px;
	border: 1px solid #000;
	border-radius: 25px;
	background: #fff;
	cursor: pointer;
}

.accodion_wrap .accordion {
	height: 80px;
	padding: 0 0 60px;
	overflow: hidden;
	transition: height .3s;
}

.accodion_wrap .checkbox:checked ~ .accordion {
	height: auto;
}

.accodion_wrap .accordion::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(transparent, #fff);
}

.accodion_wrap .checkbox:checked ~ .accordion::before {
	content: none;
}

:root {

interpolate-size: allow-keywords; //ここで設定

}

.accodion_wrap {

max-width: 900px;

margin: 0 auto;

position: relative;

}

.accodion_wrap .checkbox {

display: none;

}

.accodion_wrap .trigger {

position: absolute;

bottom: 0;

left: calc(50% - 100px);

z-index: 1;

display: flex;

align-items: center;

justify-content: center;

width: 200px;

height: 50px;

border: 1px solid #000;

border-radius: 25px;

background: #fff;

cursor: pointer;

}

.accodion_wrap .accordion {

height: 80px;

padding: 0 0 60px;

overflow: hidden;

transition: height .3s;

}

.accodion_wrap .checkbox:checked ~ .accordion {

height: auto;

}

.accodion_wrap .accordion::before {

content: '';

position: absolute;

bottom: 0;

left: 0;

z-index: 0;

width: 100%;

height: 100px;

background: linear-gradient(transparent, #fff);

}

.accodion_wrap .checkbox:checked ~ .accordion::before {

content: none;

}

ここで重要なのは1～3行目の部分となります。他はアコーディンの装飾部分となるので参考程度にご覧ください。

interpolate-size: allow-keywords;を:rootに設定するだけで文章全体で値にautoなどを設定したときにtransitionを動作させることができます。

もちろん:rootじゃ無くて細かい要素に設定することも出来ますが、特にそうする理由は思い浮かばないですね。

おわりに

対応していないブラウザでもアニメーションしないだけで従来と変わらずで特にデメリットなどはないかと思います。

どんどん使っても問題無さそうです。

ここまで簡単に説明しましたが、プロパティの詳細を知りたい方は以下の開発者向けのドキュメントをご確認くださいませ。

→高さまでアニメーション化: auto;（および他の固有のサイズ設定キーワード）を CSS 内で指定 | CSS and UI | Chrome for Developers

いままで出来なかったことが知らないうちに出来るようになっていることが最近増えてきたので最新の情報をいつでも得られるよう注意していきたいですね。

以上クリエイターブログでした。

関連記事こちらの記事も合わせてどうぞ。

SSLの仕組みをわかりやすく解説！安全なWebサイト運営のための基礎知識

2025.05.23

ウェブアクセシビリティチェック完全ガイド！誰でもできる実践方法

2025.05.09

ノーコードツールとは？Web制作の新常識と活用事例について徹底解説！

2024.08.23