CODEWITHSUNDEEP
htmlcssanimation
Richard Young
Richard Young

Reputation: 462

Change animation's transition speed in CSS when un-hovering element

I've got a dropdown menu that uses lists to achieve it. The sub menu has a height of 0 and then the hight changes when the user hovers over it.

The limit of the animation is that I can't set the max-height as auto so I've set it to a value that it unlikley that the sub menu will ever reach.

Since the tranistion time is based on the max-height is is very fast so I've slowed it down to be a suitable speed but what I'd like is to have it disappear a lot faster when someone un-hovers or even have it disppear immediately. Is there a way to do this?

.menu ul ul{
    float: left;
    padding: 0;
    position: absolute;
    text-align: left;
    width: 274px;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s ease-in;
        -moz-transition: max-height 1s ease-in;
        -o-transition: max-height 1s ease-in;
        -ms-transition: max-height 1s ease-in;
        transition: max-height 1s ease-in;
}

.menu ul li:hover ul, .menu li.over ul {
    max-height: 999px;
}

I'd like to stick to CSS but I'm willing to use JavaScript.

Upvotes: 1

Views: 2606

Answers (1)

Axel Cardinaels
Axel Cardinaels

Reputation: 168

Try this :

For the basic class ( not the :hover ), just define the transition duration you want for when the list will disapear.

On hover, define a new transition duration ( the duration that the list will take to appear ).

Quick exemple here : http://codepen.io/AxelCardinaels/pen/wBQZbm

HTML : 

<div class="text">Some texte</div>

CSS :

.text{
  background:blue;
  transition:all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
}

.text:hover{
  background:red;
  transition-duration:2s;
}

Upvotes: 2

Related Questions