CSS3 アニメーション

CSS3にはアニメーション機能が追加されている。これは、やはり追加されたトランジション機能を拡張したものである。トランジション同様プロパティの値を変化させることで効果を現している。しかし、トランジションでは変化の最初と最後のスタイルのみを指定するのに対し、アニメーションではキーフレームを設定することで、完了までのスタイルをポイント毎に細かく設定できる。

<style type="text/css">
@-webkit-keyframes mymove {
  0% {
    left:0px;
    top:0px;
  }
  40% {
    left:200px;
    top:0px;
    background-color:#33ffcc;
  }
  70% {
    left:20px;
    top:200px;
    background-color:#ff0000;
  }
  100% {
    left:400px;
    top:200px;
  }
}
@keyframes mymove {
  0% {
    left:0px;
    top:0px;
  }
  40% {
    left:200px;
    top:0px;
    background-color:#33ffcc;
  }
  70% {
    left:200px;
    top:200px;
    background-color:#ff0000;
  }
  100% {
    left:400px;
    top:200px;
  }
}
div#box {
    width:100px;
    height:100px;
    position:relative; 
    background-color:#da70d6;
    font-family:Helvetica,sans-serif;
    font-weight:bold;
}
div#box.move {
    -webkit-animation-name:mymove;
    -webkit-animation-duration:5s;
    animation-name:mymove;
    animation-duration:5s;
}
</style>
<script type="text/javascript">
jQuery(function($){
  var box = $('#box');
  // 「動く」のクリック時
  $('#start').click(function(){
    // class="move"が無ければ追加
    if(!box.hasClass('move')){
      box.addClass('move');
    }
  });
});
</script>
</head>
<body>
<h2>利用するキーフレームを指定</h2>
<p>アニメーションを実行するには、アニメーション効果を適用する要素に対して、利用するキーフレームと、アニメーションの時間を指定する必要がある。<br>
利用するキーフレームを指定するにはanimation-nameプロパティを使う。
</p>
<form>
 <input type="button" id="start" value="動く">
</form>
<br>
<div id="box">sample</div>
</body>

利用するキーフレームを指定

アニメーションを実行するには、アニメーション効果を適用する要素に対して、利用するキーフレームと、アニメーションの時間を指定する必要がある。
利用するキーフレームを指定するにはanimation-nameプロパティを使う。

サンプル


sample