lightboxとCSS3

lightbox系スクリプトにCSS3のプロパティ追加すると面白い効果が手軽にできる。
見れる環境はまだ限定されるけど。

自分のサイトで実装してみた。
811022.info > photo > Page.1

@-webkit-keyframes rolling {
	from {
		-webkit-transform: translate(0px,1200px) scale(0.1) rotate(90deg);
	}
	
	to {
		animation-timing-function: ease-in-out;
		-webkit-transform: translate(0px, 0px) scale(1) rotate(0deg);
	}
}

.pp_pic_holder {
	-webkit-animation-name: rolling;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	-webkit-animation-delay: 0s;
}

自分のサイトでは、拡大用のスクリプトは、prettyPhoto.jsで、
画像クリック時にlightboxとして書き出されるクラスは「.pp_pic_holder」なので、
そこにアニメーションを適応。