読者です 読者をやめる 読者になる 読者になる

PHPとCSS3だけでアニメーション

f:id:y_d:20100513032138p:image

FlashもJavaScriptも使わずにPHPとCSS3を使ってちょっとしたアニメーションを作成してみたよ。

こちらのURLをChromeまたはSafariにて御覧下さい。ソースを見るとHTMLとCSSだけだという事が分かるかと思います。なお、どのPCやMacからみてもほぼ同じ座標にボールが表示されるようになっています。
http://demouth.net/sketch/050/

概要

1.座標が記述されているXMLを読み込む
2.座標計算する(すごい雑な計算)
3.2秒後の座標を計算する(すごい雑な計算)
4.計算後の座標をXMLに保存する
5.計算後の座標をCSSとHTMLとして出力する
6.METAタグで2秒おきにリロードする

CSSについて
{
  -webkit-transition: all 2s linear; <- 直線的に2秒間かけて移動する
}
.box0{
  -webkit-border-radius:7.5px; <-角にRをつけて丸く見せている
  -webkit-transform: translate(560.84px,238.8px);  <- 移動後のXY座標(Webkit用)
  -moz-transform: translate(560.84px,238.8px);  <- 移動後のXY座標(Firefox用)
  width:15px;height:15px; <- 幅と高さ
}
.box0:empty {  <- 読み込み完了時にアニメーションするようのセレクタ(本来の使い方とは違います・・・)
  -webkit-transform: translate(568.84px,278.8px);  <- 移動前のXY座標(Webkit用)
  -moz-transform: translate(568.84px,278.8px);  <- 移動前のXY座標(Firefox用)
}
ソース

すごい雑で汚いソースですが、おいておきます。
ソースのダウンロード