当元素失去悬停时反转动画

Question

大家好，这是我的第一个问题。

如何在鼠标离开元素时反转动画?

http://jsfiddle.net/ps3PT/

<ul class="thumb-list">
    <li>
        <a href=""><img  src="photo.jpg" alt="BlaBla"></a>
    </li>
    <li>
        <a href=""><img  src="photo.jpg" alt="BlaBla"></a>
    </li>
    <li>
        <a href=""><img  src="bd2.png" alt="BlaBla"></a>
    </li>
</ul>

Answer 1

在这种情况下，您应该使用CSS过渡而不是动画。这样，当悬停在开启/关闭时，元素可以被转换。只需将过渡属性放在img元素本身。

更新示例

.thumb-list li a img {
    height: 128px;
    width: 128px;
    border: 20px solid rgba(0, 0, 0, 0.3);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}
.thumb-list li a img:hover {
    -moz-border-radius: 30%;
    -webkit-border-radius: 30%;
    border-radius: 30%;
}