CSS3 自定义动画在 :hover 之后触发

Posted 2023-03-06

【中文标题】CSS3 自定义动画在 :hover 之后触发

【英文标题】：CSS3 custom animation triggering after :hover

【发布时间】：2013-07-24 16:45:58

【问题描述】：

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

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

我的问题是我无法找到释放悬停时触发挥杆的方法。我知道这是一个逻辑问题，因为我已经看到了它的示例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" >
        </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);
    

【问题讨论】：

仅使用css释放悬停时，您无法触发任何操作

这家伙做到了。 css-tricks.com/examples/DifferentTransitionsOnOff

那是动画回到它的默认位置，所以是的，你可以尝试伪造它，但你不能在“mouseleave”事件上调用自定义动画css

对，这就是为什么它被命名为'动画触发后：悬停'

【参考方案1】：

不错的技术，我不知道您可以在悬停在 div 上时触发动画！ 我稍微摆弄了一下，希望它能够正常工作，即使不像预期的那样顺利，但这可能足以朝着正确的方向更进一步。

这里的问题是 - 我猜 - 您没有声明悬停状态的动画（如您的链接中所建议的那样），而只是一个过渡。所以我尝试为悬停时打开“门”添加一个过渡...

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

...还有一个会在鼠标移出时触发的动画：

   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" >
        </figure>
    </li>
</ul>

【讨论】：

这是朝着正确方向迈出的一大步。稍作调整后我会更新。

【参考方案2】：

我使用 :not pseudo-class 让它在 Firefox v22 中工作，如下所示：

Working Example

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

这个伪类组合看起来很糟糕，但它确实有效。

动画仍然需要为 -webkit- 浏览器做一些工作......