css - CSS 过渡属性

Question

我在一个 div 的锚标签中有三个图像。我正在使用 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>

Answer 1

如果这是您正在寻找的，那么它对我有用。

CSS

.previousvideos img {
    float: left;
    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: 20px;
}

编辑

更新小提琴