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

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
eyecatch

ブロックレベル要素とインライン要素

eyecatch

ドロップシャドウでテキストやボックスに影を付ける

CSSの記事

eyecatch

CSSのスタイルの優先順位

eyecatch

CSSで指定したスタイルをHTMLに読み込む方法

eyecatch

ドロップシャドウでテキストやボックスに影を付ける

eyecatch

idとclassの使い分け

eyecatch

ボックスモデルとマージン・パディング

eyecatch

セレクタとプロパティの基本

CSSの記事一覧HOME