CSS3动画重复一遍又一遍

Question

我想写一个动画，这将使.hint DIV在徘徊时消失。

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

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

编辑

我想.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。

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

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

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