Выпадающее меню Fade Out

Question

, поэтому я создал раскрывающееся меню. Когда пользователь наводит курсор на кнопку навигации, используя CSS3 Transitations класс «выпадающий-контента» исчезает, как показано на рисунке ниже демо:

https://jsfiddle.net/4xk78qse/

То, что я не могу понять, как приглушить «dropdown-content», когда пользователь не навешивает ни одну из кнопок.

я попробовать добавить

animation fadeout 2s; 

@keyframes fadeout { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

существу противоположность проявки анимации в jsfiddle примере, но это не сработало.

Если кто-нибудь может помочь мне исчезнуть, когда пользователь не наведет ни одну из кнопок, которые были бы удивительными! Спасибо.

Answer 1

Вам лучше переходы используют, чтобы сделать это вместо того, чтобы ключевые кадры анимации, как это:

.dropdown-content { 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    opacity: 0; 
    transition: all 1s; 
} 

Fiddle

Answer 2

Вам нужен этот CSS, потому что, когда парения конец ваш класс парения преобразование в».dropdown .dropdown-контент ». Затем вы вызываете fadeout только для выпадающего контента.

.dropdown .dropdown-content{ 
    display: block; 
    opacity: 1; 
    -webkit-animation: fadeout 2s; 
    -moz-animation: fadeout 2s; 
    -ms-animation: fadeout 2s; 
    -o-animation: fadeout 2s; 
    animation: fadeout 2s; 
    opacity: 0; 
} 
@keyframes fadeout { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

Answer 3

Хитрость здесь заключается в использовании CSS Transitions, а не в CSS-анимации. Вы будете устанавливать visibility и opacity вместо отображения.

.dropdown-content { 
    visibility: hidden; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    -webkit-transition: opacity 2s, visibility 2s; 
    -moz-transition: opacity 2s, visibility 2s; 
    -ms-transition: opacity 2s, visibility 2s; 
    -o-transition: opacity 2s, visibility 2s; 
    transition: opacity 2s, visibility 2s; 
    opacity: 0; 
} 
.dropdown:hover .dropdown-content { 
    visibility: visible; 
    opacity: 1; 
} 

Вот рабочая демонстрация того, что вы пытаетесь достичь: https://jsfiddle.net/4xk78qse/9/