Here is a HTML. If i add transition rule it has outro transition. But when i add animation rule it animation does not work.
<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>
So how do i make outro animation on CSS???
You could use this code:
.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>
Or you could change the linear
to another transition of your choice.
By using -webkit-transition
, -moz-transition
, -o-transition
& transition
you have support for most popular browsers.
If you have anymore questions or you want something different, just ask me.
Here is a fiddle with linear
transitions: https://jsfiddle.net/f5ryq3yg/ (graph http://easings.net/ at the top of the page)
Or one with ease-in-out
transitions: https://jsfiddle.net/skvykpsj/1/ (graph http://easings.net/#easeInOutSine )
All you need to do is create animation.
@keyframes { 0%{ margin:0; } 100%{ margin:100%; }
etc.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.