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

【问题标题】：Reverse animation when element lose hover当元素失去悬停时反转动画
【发布时间】：2014-06-27 13:03:12
【问题描述】：

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

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

<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>

【问题讨论】：

标签： css animation hover

【解决方案1】：

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

Updated Example

.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%;
}

【讨论】：

谢谢你成功了，但是“当元素失去悬停时，可以反转@keyframes 动画吗？”
@gagna 看看这个example.. 也可以参考this question.. 可能会有帮助。