CSS3动画一次又一次地重复

Question

我正在尝试编写一个动画，让.hint div在悬停时消失。

这是我尝试过的live demo 但是，即使在最后添加animation-iteration-count:1;之后，动画仍会一次又一次地继续。 Codepen使用prefixfree.js，因此我的代码中没有使用供应商前缀。

如何在仅1次迭代后停止动画？

修改

我希望.hint保持不透明度：0，当光标不在它上面时。

Answer 1

您应该将动画的填充模式设置为forwards。这将使动画保持上一个keyframe执行的状态，即opacity: 0;）

animation-fill-mode: forwards;

---

如果你想让它在一次悬停后鼠标离开元素后仍然保持在opacity: 0;，请为opacity: 0;添加一个类，如下所示，并使用jQuery将其附加到元素onmouseleave 。

另外，请记住在这种情况下你不能使用CSS hover，因为如果指定了:hover规则，即使opacity为0并移动了鼠标，它也会触发动画超过元素的位置。相反，你应该有一个class作为hover并且只将它附加到元素上，就像我在下面使用jQuery所示。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.hint').on('mouseout', function() {
    $('.hint').addClass('alreadyHovered');
  });
  $('.hint').on('mouseover', function() {
    if (!($('.hint').hasClass('alreadyHovered'))) {
      $('.hint').addClass('hover');
    }
  });
});

＆＃13;

@-webkit-keyframes vanish {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes vanish {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes vanish {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hint {
  width: 20%;
  background-color: #E51400;
  position: fixed;
  top: 10%;
  right: 10px;
  border-width: 2px;
  padding: 1em;
  color: white;
}
.hover {
  -webkit-animation-name: vanish;
  -moz-animation-name: vanish;
  animation-name: vanish;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.alreadyHovered {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint">Hello</div>

＆＃13;

＆＃13;

＆＃13;