Question

我正在创造一系列“窗户”或“小狗门”，当它们徘徊时，似乎像小狗门一样推回“窗户”。

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

我的问题是，当悬停被释放时，我无法找到触发挥杆的方法。我知道它是一个逻辑问题，因为我已经看到它完成here并使用关键帧[here] [2]的例子。我也知道我可以用javascript解决这个问题，但我严格坚持使用这个网站的CSS。

更新：

这是工作示例。 Fiddle

谢谢大雄！

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;
    animation: swing 2s;
    z-index: 10;
}

.door:hover img {
      transform-origin: top;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-60deg);
    -webkit-transition: all .2s;
    background-color: #00a99d;
    -webkit-animation: swing;
    /* Safari and Chrome */
}
@-webkit-keyframes swing {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    0% {
        -webkit-transform: rotateX(-60deg);
    }
    20% {
        -webkit-transform: rotateX(-60deg);
    }
    40% {
        -webkit-transform: rotateX(25deg);
    }
    60% {
        -webkit-transform: rotateX(-20deg);
    }
    80% {
        -webkit-transform: rotateX(5deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}

Answer 1

很好的技巧，我不知道你可以在徘徊div时触发动画！我摆弄了一下，希望即使没有预期的那么顺利也能让它工作，但这可能足以向正确的方向迈进一步。

这里的问题是 - 我想 - 您没有在悬停状态下声明动画（如链接中所示），而只是转换。所以我尝试在悬停时打开“门”的过渡...

.door:hover img {
  transform-origin: top;
  transform: rotateX(-60deg);
  transition: all .2s;

...以及将在mouseout上触发的动画：

   animation: swing;
 }

希望这个fiddle显示你需要什么，或者至少可以帮助你。无论如何，非常高兴自己学到了新的东西，谢谢。

* {
    list-style: none;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
 
}
*:hover {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.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;
    animation: swing 2s;
    z-index: 10;
}

.door:hover img {
      transform-origin: top;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-60deg);
    -webkit-transition: all .2s;
    background-color: #00a99d;
    -webkit-animation: swing;
    /* Safari and Chrome */
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    20% {
        -webkit-transform: rotateX(-60deg);
    }
    40% {
        -webkit-transform: rotateX(25deg);
    }
    60% {
        -webkit-transform: rotateX(-20deg);
    }
    80% {
        -webkit-transform: rotateX(5deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}

<ul class="window">
    <li>
        <figure class="door">
            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="">
        </figure>
    </li>
</ul>

Answer 2

我使用:not pseudo-class就像在Firefox v22中一样工作：

<强> Working Example

.door img:not(:hover) {
    transform-origin: top;
    animation: swing 2s;
}

这个伪类组合看起来像一个坏的黑客，但它的工作原理。

动画仍然需要为-webkit- browsers ...做一些工作......

CSS3自定义动画触发后：悬停

2 个答案: