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

transitionsとanimations

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

transitionsによる変化

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

transition{
  background-color:red;
  transition:background-color 5s linear;
}
.transition:hover{
  background-color:blue;
}
.sample01{ background-color:red; color:white; border:solid 1px #000; transition:background-color 3s linear; margin:12px 0; padding:4px 10px; } .sample01:hover{ background-color:blue; }

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

transition

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;
}
@keyframes ani{ 0%{} 33%{background-color:green;} 66%{background-color:orange;} 100%{background-color:blue;} } .sample02{ color:white; background-color:red; border:solid 1px #000; margin:12px 0; padding:4px 10px; } .sample02:hover{ background-color:blue; animation-name:ani; animation-duration:5s; animation-timing-function:linear; }

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

animations
B!

関連記事

HOME