クロスフェードを実現するCSS4のcross-fade()

iOS6のMobile Safariではimage-set関数以外にもクロスフェードを実現するCSS4のcross-fade関数が実装されています。

cross-fade関数は元々、CSS3として実装が議論されていましたが最新の仕様ではCSS4に移行しているみたいです(よくわからないけど)。

クロスフェードでは2つの画象がそれぞれ異なる透過度をもって重なって表示している状態を作り出せます。

#img{
	background:-webkit-cross-fade( url(cover.png) ,url(img.jpg) , 0% );
	width:500px;
	height:667px;
}

この場合はcover.pngが0%の透過度、img.jpgが100%の透過度で表示されます。

#img{
	background:-webkit-cross-fade( url(cover.png) ,url(img.jpg) , 50% );
	width:500px;
	height:667px;
}

この場合はそれぞれ50%の透過度。

#img{
	background:-webkit-cross-fade( url(cover.png) ,url(img.jpg) , 100% );
	width:500px;
	height:667px;
}

この場合はcover.pngが100%の透過度、img.jpgが0%の透過度で表示されます。

ちょっと使いどころがわからないのですが、次のページで公開されているサンプルなどを見るとちょっと想像力が膨らむかなと。

transitionあたりが対応してくれるともう少し使いどころが増える気もするんですが。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー