CSS3 Анимация повторяется снова и снова

Question

Я пытаюсь написать анимацию, которая заставит .hint исчезнуть при падении.

Вот live demo того, что я пробовал.
Но анимация продолжает повторяться снова и снова, даже после добавления animation-iteration-count:1; в конце. Codepen использует prefixfree.js, поэтому в моем коде не используются префиксы поставщика.

Как сделать остановку анимации только после 1 итерации?

EDIT

Я хочу .hint остаться непрозрачности: 0, когда курсор находится не над ней.

Answer 1

Вы должны установить режим заполнения анимации как forwards. Это позволит сделать анимацию держать состояние, который исполнялся последним keyframe который (opacity: 0;)

animation-fill-mode: forwards; 

---

Если вы хотите, чтобы он оставался в opacity: 0; даже после того, как мышь покидает элемент после того, как один парения, добавить класс для opacity: 0;, как показано ниже, и прикрепите его к элементу onmouseleave с помощью jQuery.

Кроме того, помните, что вы не можете использовать 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>