CSS3 transition が効かない

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



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

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);
}

display:block;

display:inline-block;/*または*/

transition: all 0.5s;

}

a:hover{

transform: translate(0px, 5px);

}