gaaamiiのブログ

悪気なく間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

【CSS3】リンクhover時の変化をふわっとさせるやつ(transition)簡単すぎわろた

「CSS3でアニメーション!」とかいうとなんだか難しいことを新たに勉強する必要があるような気がしてて目を反らしてたんだけど、ちょっと調べてみたらたった2行でいいことが判明。

.hoge a{
  display:block;
  width: 200px;
  height: 50px;
  background: black;

  /* この2行がCSS3 */
  transition-property: all;
  transition: 0.3s linear;
}
.hoge a:hover{
  background: blue;
}

(ベンダープレフィックスは省略してます)

意味は「0.3秒で背景が黒→青になります」って感じ。
また、

.hoge a{
...
  transition-property: background,width,height;
...
}
.hoge a:hover{
  background: blue;
  width:300px;
  height:100px;
}

上のように、transitionプロパティを一つずつ指定してあげることも可能。

先日公開した3つのはてブでも、とりあえず簡単なトランジションは指定してみました。ふむ、ちょっと気持ち良い。

書籍

(デザイン的なところを含めた解説はMdNが評判良いですよね。実践的な例が多くて好きです。)

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3デザインブック 仕事で絶対に使うプロのテクニック