【ＨＴＭＬ５】CSS3を使って動画（動く絵？）

　前のエントリ

「iphone動画の本命はCSS3のアニメ？FlashのPackager for iPhone？」で書いたCSS3の動画というか、アニメーションというかについて。

いままで、アニメーション方法は

・【ＨＴＭＬ５】ＳＶＧを使ってＪａｖａｓｃｒｉｐｔで動画（動く絵？）

・【ＨＴＭＬ５】Canvasを使ってＪａｖａｓｃｒｉｐｔで動画（動く絵？）

と２つの方法を示してきた。もう１つ方法がある。CSS3を使うものなのだが、今回は、それについて書く。

---

■例

　まあ、とにかく、サンプルを書く。以下に示すソースをChromeで表示させると、いきなり、赤い■がでてきて、それがジグザグして、最後に消える。

＜html＞
＜head＞
＜title＞■が動く＜/title＞
＜style type="text/css"＞
＜!--
＠-webkit-keyframes myanime {
	0%   { left: 1   ; top:   1 ; opacity: 1; }
	25%  { left: 200 ; top: 100 ; opacity: 1; }
	50%  { left: 1   ; top: 200 ; opacity: 1; }
	75%  { left: 200 ; top: 300 ; opacity: 1; }
	100% { left: 1   ; top: 300 ; opacity: 0; }
}

＃item1 {
	 width: 20px;
	 height: 20px;
	 position: absolute;
	background: ＃ff0000;

	-webkit-animation-name: myanime;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}

＃waku {
	 width: 250px;
	 height: 350px;
}

--＞
＜/style＞
＜/head＞
＜body＞
＜div id="waku"＞
	＜div id="item1" /＞
＜/div＞
＜/body＞
＜/html＞

（上記＜　＞　＠　＃　は、本当は半角）

---

■手順

つまり、

１．CSSで、
　　＠-webkit-keyframes 名前

　　で、全体の何パーセントのときに、どーいう風になっているか（left,topの位置など）を指定する

２．さらに
　　＃ID名{
　　　　-webkit-animation-name: １でつけた名前;
　　　　　　：
　　　　　　：

　などで、アニメーション指定をする。なお-webkitは、Chromeなど、webkitをレンダリングに使っている場合に指定することば。


３．bodyの中で、IDに対応するものを書く。
　　今回はdiv id="item1"として、対象をdivにしたけど、imgでももちろんOKなのお・・・

---

■特徴

　みてもらうとわかるけど、いままでのJavascriptの時と違い、スムーズでちらつきがない。
　どうもCSSでやらせたほうが、はやくてきれいのようだ・・・

　もちろん、ケータイブラウザなどだと、Javascriptは、どこまでいくかわかんないので、こっちのほうが、いいかもしんない。

iphone動画の本命はCSS3のアニメ？FlashのPackager for iPhone？

　お、日経コンピューター２０１１年３月３日号、

「特集　スマートフォン自由自在」の５２ページ１段目の上から３行目あたりから、
iPhoneでもFlashができるという、
Packager for iPhone
http://labs.adobe.com/technologies/packagerforiphone/
が出てますね！


おお・・・ただ、FlashでiPhone／iPadが使えないと言われた時期に、
CSS3を使ってアニメーションという方向も模索されたよねえ・・
・・・というか、今もやってるか
（あ、この方法について書いてないね。今度書く）



今後のiphone動画の本命は、
CSS3によるアニメーションなんでしょうか？
それともFlashによるPackager for iPhoneなんでしょーか？


いや、やっぱり・・・

AAをJavaScriptで動かす・・・ですよね　←　いや、それは違う！