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转换：