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>