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> 

那麼我該如何在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轉換：