リンクホバーやメディアクエリでの簡単アニメーション

リンクホバー時に文字色をゆったり変化させたり、メディアクエリで画面幅に応じてレイアウトを変更させたりする時に、簡単にアニメーションする方法。

CSS で transition プロパティを使って変化するスピードを指定し、あとは :hover や Media Queries を指定するだけ。

a {
  color:#0000ff;
  transition:0.5s;
}

a:hover {
  color:#ff0000;
}

例えばこんな風にすれば、リンクホバー時に文字色がアニメーションで変化してくれる。

div.wrapper {
  width:70%;
  transition:0.5s;
}

@media screen and (max-width:500px) {
  div.wrapper {
    width:100%;
  }
}

例えばこういう風に Media Queries を指定すると、div.wrapper はウィンドウ幅が 500px を切った時にニュルっとアニメーションしながらボックスの幅が変わる。

transition プロパティの値は「秒単位 + s」で変化するスピードを指定する。0.5s であれば0.5秒かけてアニメーションする。

jQuery を使わなくても簡単なアニメーションであれば CSS のみで簡単に書ける、という一例でした。