如何使 CSS3 悬停过渡只运行一次，而不是在用户“取消悬停”后“倒带”？

Posted 2023-03-06

【中文标题】如何使 CSS3 悬停过渡只运行一次，而不是在用户“取消悬停”后“倒带”？

【英文标题】：How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?

【发布时间】：2012-05-02 19:00:57

【问题描述】：

我有一些 CSS（见下文），当用户将鼠标悬停在外部字段上时，我想使内部 div（小猫）在屏幕上平移。这工作正常，但正如您所料，当用户从外场移开他或她的鼠标时，动画会“倒回”，然后（当然）如果用户再次悬停，它会重播。我试图弄清楚如何让这个动画运行一次（用户第一次悬停在外场上），然后不再倒带或播放，无论他或她将来悬停在什么上面。这可能吗？我不想在我的页面上添加另一个脚本，但如果这是唯一的解决方法，那么我愿意接受。提前致谢！

会

<style type="text/css">
div.kitty 
    position: absolute; 
    bottom: 50px; 
    left: 20px; 
    -webkit-transition: all 3s ease-in; 
    -moz-transition: all 3s ease-in; 
    -o-transition: all 3s ease-in; 
    -ms-transition: all 3s ease-in;
    animation-iteration-count: 1;

#actioner 
    padding: 0px;
    height: 400px;
    position: relative;
    border-width: 1px;
    border-style: solid;

#actioner:hover div.kitty
    -webkit-transform: translate(540px,0px); 
    -moz-transform: translate(540px,0px); 
    -o-transform: translate(540px,0px); 
    -ms-transform: translate(540px,0px);

</style>

<div id="actioner">
    <div class="kitty">Kitty-Cat Sprite</div>
</div>

【问题讨论】：

有可能使用纯 css 来做到这一点，你可以在***.com/a/19962658/1778681查看它

【参考方案1】：

恕我直言，纯 CSS 是不可能的。 最简单的解决方案是使用 jQuery。

// css
.actioner
    -webkit-transform: translate(540px,0px); 
    -moz-transform: translate(540px,0px); 
    -o-transform: translate(540px,0px); 
    -ms-transform: translate(540px,0px);


// script
$(function()
    $('.kitty').one("mouseover", function() 
        $('.kitty').addClass('actioner');
    );
);