下記のように指定してもアニメーションが効かない時があります。
|
1 2 3 4 5 6 |
a{ transition: all 0.5s; } a:hover{ transform: translate(0px, 5px); } |
要素がdisplay: inlineの場合、効かないようです。
ですので、下記のように displayに「block」か「inline-block」を指定すれば、動作するようになります。
|
1 2 3 4 5 6 7 8 |
a{ display:block; display:inline-block;/*または*/ transition: all 0.5s; } a:hover{ transform: translate(0px, 5px); } |
