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');
});

Answer 2

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

通过放置无限你设置迭代计数来不断重复播放。取出无限将解决您的问题。

动画后CSS3保存位置

2 个答案: