【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プロパティを一つずつ指定してあげることも可能。