• css3

    アニメーション(transition)

    2012/09/07

    transitionを使ったアニメーションについて。

    box2.png

    transitionは変化を与えるプロパティです。

    CSS3でアニメーションするにはtransitionかanimationを使いますが、
    始点と終点のみのさくっとしたアニメーションはtransitionが向いてる気がします。


     

    書き方

    
    -webkit-transition-property: 変化させたいプロパティ;
    -webkit-transition-duration: 変化にかける時間;
    -webkit-trantion-timing-function: 変化する速度のパターン;
    -webkit-transition-delay: 変化を遅れて開始する時間;
    
    

    多いし長いわ!\(^o^)/

    って思いますが、これは全て-webkit-transition:で一括指定できます。


    まずは理解する為にひとつずつやっていきます。



    ●マウスオーバーするとボックスの背景色を変化させる



    背景色が変化するよ

    
    #box01{
      width: 300px;
      height: 100px;
      -webkit-transition-property: background-color;
      border: 2px solid #03F;
      background: #FF0;
      color: #000;
    }
    #box01:hover{
      border:2px solid #000;
      background: #f00;
      color: #fff;
    }
    
    

    はい。これでは通常のhoverと同じですよね( ・`ω・´;)

    上では、background-colorを変化するプロパティに指定しました。
    これに時間を追加します。


    背景色が変化するよ

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


    
    #box02{
      width: 300px;
      height: 100px;
      -webkit-transition-property: background-color;
      -webkit-transition-duration: 3s;
      border: 2px solid #03F;
      background: #FF0;
      color: #000;
    }
    #box02:hover{
      border:2px solid #000;
      background: #f00;
      color: #fff;
    }
    
    


     

    時間はs(秒)、ms(ミリ秒)で指定します。
    ここでは3s(秒)を指定しました。

    背景色のみが3秒かけて変化しているのがわかりますか?
    他のプロパティは通常のhover時と同じです。

     


    指定するプロパティは、カンマ区切りで複数指定できますが、適用可能な全てを指定したい場合は、allにします。


    全部が変化するよ

    
    #box03{
      width: 300px;
      height: 100px;
      -webkit-transition-property: all;
      -webkit-transition-duration: 3s;
      border:2px solid #03F;
      background: #FF0;
      color: #000;
    }
    #box03:hover{
      border: 2px solid #000;
      background: #f00;
      color: #fff;
    }
    
    

    背景色・ボーダー色・テキストカラーがスムーズに変化しました!



    ●ボックスをスー!と移動させる
     

    同じくマウスオーバーで先ほどのボックスを平行移動させます。



    変化しながら横に移動するよ

    
    #box04{
      position: relative;
      top: 0;
      left: 0;
      width: 300px;
      height: 100px;
      -webkit-transition-property: all;
      -webkit-transition-duration: 1s;
      border:2px solid #03F;
      background: #FF0;
      color: #000;
    }
    #box04:hover{
      left: 500px;
      border: 2px solid #000;
      background: #f00;
      color: #fff;
    }
    
    

    左0pxに配置したボックスが1秒で500px移動しました。



    これに速度のパターンを加えます。


    ●指定できる値

    linear ※初期値 一定の速度で変化
    ease 少し減速して始まり、少し減速して終わる
    ease-in 減速して始まる
    ease-out 減速して終わる
    ease-in-out 減速して始まり、減速して終わる


    変化しながら横に移動するよ

    
    #box05{
      position: relative;
      top: 0;
      left: 0;
      width: 300px;
      height: 100px;
      -webkit-transition-property: all;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: ease-in;
      border:2px solid #03F;
      background: #FF0;
      color: #000;
    }
    #box05:hover{
      left: 500px;
      border: 2px solid #000;
      background: #f00;
      color: #fff;
    }
    
    

    減速して始まるease-inを指定しました。
    ンースーーー!って感じの動きですね!



    この変化を遅れて開始させます。
    マウスオーバーをして1秒後にスタートさせます。


    変化しながら横に移動するよ

    
    #box06{
      position: relative;
      top: 0;
      left: 0;
      width: 300px;
      height: 100px;
      -webkit-transition-property: all;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: ease-in;
      -webkit-transition-delay: 1s;
      border: 2px solid #03F;
      background: #FF0;
      color: #000;
    }
    #box06:hover{
      left: 500px;
      border: 2px solid #000;
      background: #f00;
      color: #fff;
    }
    
    

    ね!なんか焦らされてる気分!


    この時間もs(秒)、ms(ミリ秒)で指定します。



    以上がtransitionプロパティです。


    これを一括指定する場合、順不同で指定できますが

    duration(変化にかける時間)とdelay(遅れる時間)は同じ値(秒)になるので、
    ひとつめに指定されている方がduration、ふたつめがdelayと認識されます。


    まとめて書いたcssはこんな感じ!


    
    #box06{
      position: relative;
      top: 0;
      left: 0;
      width: 300px;
      height: 100px;
      -webkit-transition: all 1s ease-in 1s;
      border: 2px solid #03F;
      background: #FF0;
      color: #000;
    }
    #box06:hover{
      left: 500px;
      border: 2px solid #000;
      background: #f00;
      color: #fff;
    }
    
    
     

    タグ:CSS3

この記事へのコメント

コメントを送る

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

back