2011/07/26

アニメーションさせる

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


プロパティ名内容
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>

0 件のコメント:

コメントを投稿