• css3

    アニメーション(animation)

    2012/09/24

    @keyframesを使ったアニメーション。

    box.png

    始点と終点でのアニメーションはtransitionでアニメーションができますが、(参考:【CSS3】アニメーション(transition))
    始点と終点の間で動きに変化をつけたい場合は@keyframesを使います。

    書き方

    
    @-webkit-keyframes キーフレーム名{
      0%{
        始点のプロパティ: 値;
      }
      ◯◯%{
        途中のプロパティ: 値;
      }
      100%{
        終点のプロパティ: 値;
      }
    }
    
    

    キーフレーム名=アニメーションの名前です。
    ※任意の名前をつけることができます。

    0%と100%は始点と終点になるので必ず指定します。

    アニメーション時間0%~100%の間で、どのタイミングでどうなるかを途中のプロパティに書きます。
    ※間であればいくつでも記述可能です。

    例えばアニメーション時間が10秒の場合、50%で指定した変化は5秒目から始まります。


    上記で書いたアニメーションはこのように呼び出します。

    
    -webkit-animation-name: キーフレーム名;
    
    

    あとはtransitionと同じように、アニメーションについての指定です。


    例でマウスオーバー時に移動するボックスのアニメーションを作ってみます。

     

    動くよボックス

    ※-webkit-対応ブラウザでみてください(safari/chrome)
     

    
    @-webkit-keyframes boxAnime1{
      0%{
        top: 0;
        left: 0;
      }
      50%{
        top: 200px;
      }
      100%{
        top: 0;
        left: 500px;
      }
    }
    #box1{
      position: relative;
      width: 300px;
      height: 100px;
      border: 2px solid #000;
      background: #f60;
      color: #000;
    }
    #box1:hover{
      -webkit-animation-name: boxAnime1;
      -webkit-animation-duration: 2s;  //アニメーションにかかる時間
      -webkit-animation-timing-function: ease-in-out;  //速度のパターン
    }
    
    

    ふぉう\(^0^)/!!


    さらにアニメーションを繰り返す回数を指定。
     

    永遠に動くよボックス

    
    @-webkit-keyframes boxAnime2{
      0%{
        top: 0;
        left: 0;
      }
      50%{
        top: 200px;
      }
      100%{
        top: 0;
        left: 500px;
      }
    }
    #box2{
      position: relative;
      width: 300px;
      height: 100px;
      border: 2px solid #000;
      background: #f60;
      color: #000;
    }
    #box2:hover{
      -webkit-animation-name: boxAnime2;
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
    }
    
    

    -webkit-animation-iteration-count: 数値;
    でアニメーションの繰り返す回数を指定できます。
    infiniteを指定するとアニメーションを無限に繰り返します。


    さらにさらに、アニメーションの逆再生。
     

    戻ってくるよボックス

    
    @-webkit-keyframes boxAnime3{
      0%{
        top: 0;
        left: 0;
      }
      50%{
        top: 200px;
      }
      100%{
        top: 0;
        left: 500px;
      }
    }
    #box3{
      position: relative;
      width: 300px;
      height: 100px;
      border: 2px solid #000;
      background: #f60;
      color: #000;
    }
    #box3:hover{
      -webkit-animation-name: boxAnime3;
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
    }
    
    


    ふぉうふぉう\(^0^)/!!


    -webkit-animation-direction: alternate;
    を指定すると、繰り返しの時にアニメーションを逆再生します。
    (奇数回目は通常、偶数回目は逆再生)


    これらを一括指定で書くとこのようになります。
     

    
    @-webkit-keyframes boxAnime3{
      0%{
        top: 0;
        left: 0;
      }
      50%{
        top: 200px;
      }
      100%{
        top: 0;
        left: 500px;
      }
    }
    #box3{
      position: relative;
      width: 300px;
      height: 100px;
      border: 2px solid #000;
      background: #f60;
      color: #000;
    }
    #box3:hover{
      -webkit-animation: boxAnime3 2s ease-in-out infinite alternate;
    }
    
    

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back