CSS3 transition が効かない

CSS CSS

CSS3のtransition で下記のように指定してもが効かない時があります。

a{
  transition: all 0.5s;
}
a:hover{
 transform: translate(0px, 5px);
}

要素がdisplay: inlineの場合、効かないようです。
ですので、下記のように displayに「block」か「inline-block」を指定すれば、動作するようになります。

a{
 display:block;
 display:inline-block;/*または*/
 transition: all 0.5s;
}
a:hover{
 transform: translate(0px, 5px);
}

コメント

タイトルとURLをコピーしました