CSS3のtransition で下記のように指定してもが効かない時があります。
|
1 2 3 4 5 6 7 8 9 10 |
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 9 10 11 12 |
a{ display:block; display:inline-block;/*または*/ transition: all 0.5s; } a:hover{ transform: translate(0px, 5px); } |
