アニメーションさせる

テキストやイメージ等をフラッシュのようにぐりぐり動かすには、「@keyframes」「animation」プロパティを指定します。
本項執筆時点では、keyframesはSafariのバージョン４以降、Chromeの３以降でないと正常に動作しないようです。

プロパティ名	内容
animation-name	フレーム名を指定
animation-duration	アニメーションにかける時間(s/ms)
animation-timing-function	速度の変化パターン
animation-iteration-count	アニメーションの繰り返し回数
animation-direction	繰り返し指定 alternate:逆再生
animation-delay	アニメーションの開始遅延

---

Jump!

---

<style type="text/css">
@-webkit-keyframes jump {
    0% {
        top:100px;
        left:0px;
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
    }
    50%  {
        top:0px;
        left:50px;
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
    }
    100% {
        top:100px;
        left:100px;
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
    }
}
.animation {
    -webkit-animation-name:jump;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:10;
    -webkit-animation-direction:alternate;
    animation-name:jump;
    animation-duration:2s;
    animation-iteration-count:10;
    animation-direction:alternate;
    position:relative;
    left:0px;
}
</style>
<p class="animation">Jump!</p>