Tags: , ,

This is an example of the difficulty of using the ‘animation’ property for a dropdown menu. This uses ‘animation’:

So animation takes a lot more CSS and will play once when the page is ready and will always play the animation from is end position when we release the hover. NB:Leaving the start point of the reverse keyframes blank wont work either. Not good. Now transition:

Using the transition property seems much more manageable for general use, however we can’t make use of ‘keyframes’ with transitions ie. we can only set a start and end point and nothing in between. In this example we don’t need them, the animation only uses start and end keyframes anyway. So what happens if we add a 50% keyframe with a color change and try to mix the two…

DAMN! Unfortunately the two are incompatible. While having the ability to use keyframes is cool its going to take a lot of effort and JS to get things behaving acceptably with :hover.
So here’s a toggle version with code.

CSS:

#animations5 {
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    position:relative;
    width:25%;
    height:50px;
    background:#fcaf3e
}
#animations5 a {
    cursor:pointer;
    display:block;
    width:100%;
    text-align:center;
    color:#fff
}
#animations5 a:hover {
    color:#000;
    background:rgba(255, 255, 255, .1)
}
#animations5 ul {
    list-style:none;
    line-height:50px;
    margin:0;
    padding:0
}
#animations5>ul>li {
    position:relative;
    width:100%;
    height:50px;
    color:#fff
}
#animations5>ul>li>ul {
    position:absolute;
    top:50px;
    left:0;
    background:#fcaf3e;
    width:100%;
    height:0;
    overflow:hidden;
    -webkit-transition:height 2s;
}
@-webkit-keyframes animations5 {
    0%  {height:0; -webkit-transform: rotateX(0deg) rotateY(0deg);}
    25% {background:#FF0DFF;}
    50% {background:#24EEFF;-webkit-transform: rotateX(180deg) rotateY(90deg);}
    75% {-webkit-transform: rotateY(360deg);}
    100%{height:400%; -webkit-transform: rotateX(360deg) rotateY(0deg);}
}
.on{
    height:400% !important;
    display:block;
    -webkit-animation:animations5 2s ease-out;
}

HTML:

<div id="animations5">
<ul>
<li><a>Boats</a>
<ul>
<li><a href="#">Catamaran</a></li>
<li><a href="#">Dhow</a></li>
<li><a href="#">Carrack</a></li>
<li><a href="#">Sloop-of-war</a></li>
</ul>
</li>
</ul>
</div>

jQuery:

$(document).ready(function(){
    $('#animations5>ul>li>a').click(function(){
        $('#animations5>ul>li>ul').toggleClass('on');
    });
});

Result:

Though you might want to try to do a more tastefull animation as this is starting to look like a early 00′s flash based fever dream.