transition.css

transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。

CDNも用意されていますが、配布サイトで数値を調整してコードをコピーする事も出来るので1つのプロジェクトで複数のエフェクトを使わないのであればCSSそのものを読み込む必要はありません。

遷移のスタイルは円型、ワイプ、四角型、ポリゴンなどに分けられており、各種にいくつか異なるエフェクトが用意されています。

以下、動作サンプルです。

右下にあるrerunを押せば動作を確認できます。

サンプルではポリゴンのin:diamond:hesitateを利用してみました。以下のコードが提供されます。

@keyframes diamond-in-hesitate {
	0% {
		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
	}
	50% {
		clip-path: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%);
	}
	100% {
		clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
	}
}

[transition-style="in:diamond:hesitate"] {
	animation: 1.5s cubic-bezier(0.25, 1, 0.3, 1) diamond-in-hesitate both;
}

このアニメーション遷移エフェクトを付与したいHTML要素に、オリジナルの属性を与えます。

<div transition-style="in:diamond:hesitate">
	<h1>foo bar</h1>
</div>

あとは遷移前と遷移後のスタイルを整えれば見栄えの良いエフェクトになるんじゃないでしょうか。

GithubではCSS変数を使ったカスタマイズ法も書かれているので興味のある方はチェックしてみてくださいね。

transition.css