css - CSS トランジション プロパティ

Question

div 内のアンカー タグに 3 つの画像があります。見栄えを良くするためにCSSトランジションを使用しています。画像を中央に配置したいのですが、 float:inline; を使用してこれを実現します。しかし、左または右以外のものを使用すると、トランジションが機能しなくなります

これがCSSです

.previousvideos img {
    float: inline;
    margin-top: 15px;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
    -webkit-transition: margin 0.5s ease-out;
}
.previousvideos img:hover {
    margin-top: 2px;
}

これは HTML/PHP

<div class="previousvideos">
<a href="<?php echo "http://www.youtube.com/watch?v={$latestvideo[1]['videoID']}"; ?>">
    <img src="<?php echo $latestvideo[1]['thumbnail']; ?>" width="300" height="169">
</a>
<a href="<?php echo "http://www.youtube.com/watch?v={$latestvideo[2]['videoID']}"; ?>">
    <img src="<?php echo $latestvideo[2]['thumbnail']; ?>" width="300" height="169">
</a>
<a href="<?php echo "http://www.youtube.com/watch?v={$latestvideo[3]['videoID']}"; ?>">
    <img src="<?php echo $latestvideo[3]['thumbnail']; ?>" width="300" height="169">
</a>
</div>