动画后CSS3保存位置

Question

我有一个横幅，当我将鼠标移到它上面时会移动，当鼠标离开时，横幅会回到原来的位置，我想知道如何让它在动画结束后停在当前位置(我不知道不想每次都重置)

它是这样移动的:

  /*keyframe animations*/
.first:hover {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }

}


@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }

}

Answer 1

有几点需要考虑:

• 您可能需要悬停另一个元素，例如包含 div，当它离开屏幕时很难继续悬停在该元素上。
• 添加 animation fill mode ，只要用户继续悬停，动画的结束状态就会一直存在。

Working Example

<div class="container">
    <div class="first"></div>
</div>

 .container:hover .first{
    -webkit-animation: bannermove 30s linear both;
    -moz-animation: bannermove 30s linear both;
    -ms-animation: bannermove 30s linear both;
    -o-animation: bannermove 30s linear both;
    animation: bannermove 30s linear both;
}

@keyframes bannermove {
    0% {
        margin-left: 0px;
    }
    100% {
        margin-left: -2125px;
    }
}

如果您需要在用户不再悬停后动画结束状态持续存在，您可能需要考虑使用一个小脚本通过添加一个类来添加动画，如下所示:

Working Example 2

$('.first').mouseenter(function(){
    $('.first').addClass('banner');
});

.banner{
    -webkit-animation: bannermove 30s linear both;
    -moz-animation: bannermove 30s linear both;
    -ms-animation: bannermove 30s linear both;
    -o-animation: bannermove 30s linear both;
    animation: bannermove 30s linear both;
}

如果您需要在用户不再悬停时暂停动画并在再次悬停时恢复动画:

Working Example 3

$('.first').hover(function () {
    $('.first').addClass('banner');
    $('.banner').css('animationPlayState', 'running');
},

function () {
    $('.banner').css('animationPlayState', 'paused');
});