小编Nic*_*ais的帖子

我正在创建一系列“窗户”或“小狗门”，当悬停在上面时，似乎像小狗门一样推回“窗户”。

我已经能够创造出狗狗关门的自然效果。它来回摆动几次，然后回到默认位置。

我的问题是我一直无法找到一种在释放悬停时触发摆动的方法。我知道这是一个逻辑问题，因为我已经看到它在这里完成并使用关键帧[这里][2]的例子。我也知道我可以用 javascript 解决这个问题，但我在这个网站上严格遵守 CSS。

更新：

这是工作示例。小提琴

谢谢大雄！

HTML：

<ul class="window">
    <li>
        <figure class="door">
            <img src="http://www.ta-sa.org/data/images/laughing_man_big_2.png" alt="">
        </figure>
    </li>
</ul>

CSS：

* {
    list-style: none;



}
.door {
    width: 300px;
    height: 300px;
    margin: 0;
    position: relative;
    perspective:1000px;
    -webkit-perspective:1000px;
    /* Safari and Chrome */
}
.door img {
    background-color: #E8585A;
    width: 100%;
    display: block;
    position: relative;
    transform-origin: top;
    -ms-transform-origin: top;
    /* IE 9 */
    -webkit-transform-origin: top;
    /* Safari and Chrome */
    -moz-animation: swing 2s;
    -webkit-animation: swing 2s; …