CSSでアニメーションを設定する

transitionsとanimations

CSSでのアニメーションにはTransitonsとAnimationsの２つのプロパティが用意されています。
transisionsは始点と終点を指定して単純なアニメーションを、animationsはキーフレームで経過を指定し、より細かいアニメーションを設定することができます。

transitionsによる変化

ボックスにマウスを乗せたときに色を変化させる処理をtransitionsで実現します。 最初は赤いボックスが、マウスオーバーさせると5秒かけて青に変化します。

transition{
  background-color:red;
  transition:background-color 5s linear;
}
.transition:hover{
  background-color:blue;
}

↓マウスを乗せてみてください

animationsによる変化

ボックスにマウスを乗せたときに色を変化させる処理をanimationsで実現します。 最初は赤いボックスが、マウスオーバーさせると5秒かけて緑→橙→青と変化します。

keyframes ani{
  0%{}
  33%{background-color:green;}
  66%{background-color:orange;}
  100%{background-color:blue;}
}
.animation{
  color:white;
  background-color:red;
  border:solid 1px #000;
  margin-left:10px;
  padding:4px 10px;
}
.animation:hover{
  background-color:blue;
  animation-name:ani;
  animation-duration:5s;
  animation-timing-function:linear;
}

↓マウスを乗せてみてください