トップページ » Program » AppleのHP iPhone4s風のアニメーション的なCSS3

AppleのHP iPhone4s風のアニメーション的なCSS3

2011/11/11

CSS3 animation、スマフォ対応


こちらのようなCSS3アニメーションです(あくまでイメージ)
http://www.apple.com/jp/iphone/

» DEMOページ

たぶんIE以外対応:2011-11-11現在

fadeIn-Outのアニメーションが手こずりました。
消え始める&消え終わるのと動きはずらさないといけなくて頭がこんがらがります。

それからホントは画像を完全に読み込んでからJavascriptでCSS3の動きの外部ファイルを読み込みたかったのですが、今回は断念。fadeIn-outで相当消耗しました。

/*順番に:呼び出す関数名 アニメーションの時間 イージング スタートまでの時間 繰り返すか アニメーションの進行方向*/
#imgHide { -webkit-animation:appleRote 10s ease 1s infinite normal;}

/*メイン画像の動きの例*/
@-webkit-keyframes appleRote{
	from{top: -770px; left: 60px; -webkit-transform:rotate(0deg)  }
	40% {opacity:1 }
	50% {top: -770px; left: 60px; -webkit-transform:rotate(0deg) }
	60% {opacity:0 }
	to {top:0px }
}