CSS outro переход анимации

Question

Вот HTML. Если я добавлю правило перехода, то он будет иметь переход. Но когда я добавляю правило анимации, анимация не работает.

<div class="dropdown"> 
    <span>Hover me!</span> 
    <div class="dropdown-content"> 
     <p>CONTENT</p> 
    </div> 
</div> 

<style> 
.dropdown{ 
    position: relative; 
    width: 200px; 
} 

.dropdown-content{ 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    margin-left: 200px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    padding: 12px 16px; 
    z-index: 1; 
    animation-name: anim1; 
    animation-duration: 0.5s; 
    width: 600px; 

} 
@keyframes anim1{ 
    0%{ 
     opacity:0; 
    } 
    100%{ 
     opacity:1; 
    } 
} 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

</style> 

Так как я могу сделать outro-анимацию на CSS ???

Answer 1

Вы можете использовать этот код:

.dropdown { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.dropdown-content { 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    margin-left: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    padding: 12px 16px; 
 
    z-index: 1; 
 
    width: 600px; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.4s linear; 
 
    -moz-transition: all 0.4s linear; 
 
    -o-transition: all 0.4s linear; 
 
    transition: all 0.4s linear; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    opacity: 1; 
 
}

<div class="dropdown"> 
 
    <span>Hover me!</span> 
 
    <div class="dropdown-content"> 
 
    <p>CONTENT</p> 
 
    </div> 
 
</div>

Или вы могли бы изменить linear к другому переходу на ваш выбор.

Используя -webkit-transition, -moz-transition, -o-transition & transition у вас есть поддержка большинства популярных браузеров.

Если у вас есть вопросы или вы хотите что-то другое, просто спросите меня.

Вот скрипку с linear переходов: https://jsfiddle.net/f5ryq3yg/ (график http://easings.net/ в верхней части страницы)

Или один с ease-in-out переходов: https://jsfiddle.net/skvykpsj/1/ (график http://easings.net/#easeInOutSine)