アニメーション


animation

 animation属性を設定するとオブジェクトのアニメーションを表示することができます。animation属性のパラメータは下のように定義されます。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 これらは普通、全部指定する必要はありません。名前 (name)、継続時間 (duration)、タイミング関数 (timing-function) は必要です。名前は@keyframesにリンクするのに使用されます。

 これらのパラメータを指定するために、次のような属性も用意されています。

<style>
.box1 {
  position: relative;
  width: 80px;
  height: 60px;
  border: solid thin black;
  background-color: red;
  -webkit-animation: anim0 5s infinite; /* Chromeの場合 */
  animation: anim0 5s infinite;
}

@keyframes anim0 {
    from {left: 0px;}
    to {left: 500px;}
}
</style>
<div class="box1"></div>

 

@keyframes

 @keyframesはアニメーションの規則を定義します。@keyframesで定義した規則に従って、アニメーションが生成され、微小間隔で移動や変化し、終了または繰り返します。

@keyframes animationname {keyframes-selector {css-styles;}}

 animationnameはanimation属性のname (あるいは、animation-name属性の値)で定義したものを指定します。

 アニメーション継続の割合を指定します。最初から最後までなら from, to属性が使えます(前の例を参照)。fromは0%、toは100%を指定したのと同じです。

 css-stylesは、アニメーション中のCSSの設定です。

 下の例はボックスを移動させながら色も変えるアニメーションです。50%のところで色の変化を変えています。


<style>
.box2 {
  position: relative;
  width: 80px;
  height: 60px;
  border: solid thin black;
  background-color: magenta;
  -webkit-animation: anim0 5s infinite; /* Chromeの場合 */
  animation: anim1 5s infinite;
}

@keyframes anim1 {
    from {left: 0px;}
    50% {left: 200px; background-color: cyan;}
    to {left: 400px;  background-color: red;}
}
</style>
<div class="box2"></div>

 

このページの先頭へ戻る