0

我有一个横幅，当我将鼠标移过它时会移动，当鼠标退出时，横幅会回到原来的位置，我想知道如何让它在动画后停在当前位置（我不想每次重置）

它是这样移动的：

  /*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;
 }

}
4

2 回答 2

2

有几件事需要考虑：

  • 您可能需要悬停另一个元素，例如包含 div，当它离开屏幕时很难继续悬停在元素上。
  • 添加动画填充模式，只要用户继续悬停，这将保持动画的结束状态。

工作示例

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

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

工作示例 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;
}

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

工作示例 3

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

function () {
    $('.banner').css('animationPlayState', 'paused');
});
于 2013-10-13T23:15:24.110 回答
-1 
  .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 
   }

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

于 2013-10-13T22:31:17.427 回答