CSS3のtransition で下記のように指定してもが効かない時があります。
1 2 3 4 5 6 7 8 9 10 | a{ transition:all0.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:all0.5s; } a:hover{ transform:translate(0px,5px); } |
コメント