lightboxとCSS3

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

自分のサイトで実装してみた。
@-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」なので、
そこにアニメーションを適応。