Different CSS Transition-Delays for Hover and Mouseout

Delay mouseout/hover with CSS3 transitions

div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

This will trigger the mouseover state right away, but wait 5 sec till the mouseout is triggered.

Fiddle

Different CSS transition-delays for hover and mouseout?

If you want different CSS transition delays on hover and mouseout, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0 but on mouseout the transition is delayed by 1s.

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

You can find the full CSS in my question's updated demo below. I've used the shorthand transition property, the order of the values are:

transition:<property> <duration> <timing-function> <delay>;

Answer Demo: http://jsbin.com/lecuna/edit?html,css,output

How do I have both :hover and transition-delay?

First of all, you need to put your transition setting on both button and button:hover, if you want different delay values on hover and mouseout.

Secondly, if you want to have a transition on a property such as width, it works better if you specify its initial value on button.

And finally, you can achieve the desired result by using the ::after pseudo-element :

Your HTML

<button>click me</button>

Your CSS

button {
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 2em;
  position: relative;
  transition-delay: 0s;
  background-color: #6272a4;
  width: 100px;
}

button::after {
  content:"test";
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  padding: 12px;
  border-radius: 50%;
  background-color: red;
}

button:hover::after  {
  display: none;
}

button:hover  {
  background-color: #000000;
  width: 250px;
  transition-delay: 2s;
  color: red;
}

You can add transition time and ease if you want to.

Different CSS transition-delays for hover and mouseout for a span element in a div?

it is pretty easy just set the transition delay to 0s in normal state div > span (means when your transition return from hover state to normal state the delay should be 0 which will make the text disappear quicker)

Note: I have added a transition delay property to div > span and its value is 0s and it is the key to fade the text quicker when you mouse out

    div {

      font-size: 72px;

      margin-top: 50px;

      transition-delay

    }

    section {

      display: table; margin: 0 auto;

    }

    .boots {

      width: 50px;

      background-color: grey;

      transition: width 1s;

      display: inline-block;

    }

    .laugh {

      width: 50px;

      background-color: red;

      transition: width 1s;

      display: inline-block;

    }

    .awesome {

      width: 54px;

      background-color: orange;

      transition: width 1s;

      display: inline-block;

    }

    .happy {

      width: 52px;

      background-color: green;

      transition: width 1s;

      display: inline-block;

    }

    div > span {

      position: absolute;

      display: inline;

      visibility:hidden;

      opacity:0;

      transition:visibility 0s linear 0.5s,opacity 0.5s linear;

      transition-delay:0s;

    }

    div:hover > span {

      position: absolute;

      display: inline;

      visibility:visible;

      opacity:1;

      transition-delay:0.5s;

    }

    .boots:hover {

      width: 170px; 

    }

    .laugh:hover {

      width: 190px;

    }

    .awesome:hover {

      width: 290px;

    }

    .happy:hover {

      width: 195px;

    }

 <section>

      <div class = "boots">B<span>oots</span></div>

      <div class = "laugh">L<span>augh</span></div>

      <div class = "awesome">A<span>wesome</span></div>

      <div class = "happy">H<span>appy</span></div>

    </section>

Different transition delays for added class and hover effect

It appears you want to prevent the delay effects just when the element is being hovered, what you can do is add :not(:hover) to your original selector that adds the transition-delay. Replace your original selector:

&:nth-last-child(#{$i}n)

with:

&:not(:hover):nth-last-child(#{$i}n)

Delay the css:hover state on mouseout

You can use a transition with a delay for the bit to make it stay visible on your hover out:

.nested {

  pointer-events:none;       /* this is so it behaves like display none and mouse does not interact with child when hidden */

  opacity: 0;

  transition: opacity 0.1s;  /* change length to longer for a nicer fade */

  transition-delay: 1s;      /* fadeout won't happen for a second */

}

.hover:hover .nested {

  pointer-events: auto;

  opacity: 1;

  transition: opacity 0.1s;    /* fade in when hovered */

  transition-delay: 0s;        /* fade in immediately */

}

<div class="hover">

  hover

  <div class="nested">

  nested

  </div>

</div>

CSS transition and property delay not working on mouseout

Add the transition to the element, not the state. When the state is over (leaving the element with your mouse) the CSS takes no more effect.

Updated. Snippet now opens instantly and has a closing delay of 2000ms. By increasing the hover state delay you can increase the opening delay.

li {

  display: block;

  padding: 10px;

}

ul ul {

  max-height: 0em;

  overflow: hidden;

  -webkit-transition: 1000ms all ease 2000ms;

     -moz-transition: 1000ms all ease 2000ms;

      -ms-transition: 1000ms all ease 2000ms;

       -o-transition: 1000ms all ease 2000ms;

          transition: 1000ms all ease 2000ms;

}

ul > li:hover ul,

ul > li:focus ul,

ul > li:active ul {

  max-height: 10em;

  -webkit-transition-delay: 0s;

     -moz-transition-delay: 0s;

      -ms-transition-delay: 0s;

       -o-transition-delay: 0s;

          transition-delay: 0s;

}

<ul>

  <li>Option1

    <ul>

      <li>OptionA</li>

      <li>OptionB</li>

    </ul>

  </li>

  <li>Option2</li>

</ul>

I Want To Apply Delay On Mouse Out in css

You can add a delay to a transition, the syntax is as follows:

transition: all 0.5s ease-in-out 3s;

So

transition: <property> <duration> <timing-function> <delay>;

The syntax is the same for all the prefixed versions also.

I have created a demo of this, because you need to do something a bit tricky in order to make the item appear with no delay, but delay before it goes.

http://jsfiddle.net/pgqM2/

The trick is to re-define the transition to add the 3s delay when there is no hover, but to have a 0s delay when there is a hover:

li ul {
    opacity: 0;
    transition: all 0.5s ease 3s;
}

li:hover ul {
    opacity: 1;
    transition: all 0.5s ease 0s;
}

CSS Hover Out / Mouse Out Transition?

I set the opacity of the div to zero so it won't be visible but it's still a in display mode block and when your mouse is out of the element it's start to fade out as you wanted.

Add this to your css:

.top-links li.music:hover + div.musictest {

       opacity:1;
       transition: opacity 0.1s;
       -moz-transition: opacity 0.1s;
       -webkit-transition: opacity 0.1s;
       -o-transition: opacity 0.1s;
    }

  .top-links li.music + div.musictest {
       opacity:0;
       display:block;
       transition: opacity 2s;
       -moz-transition: opacity 2s;
       -webkit-transition: opacity 2s;
       -o-transition: opacity 2s;
    }

And here is a working example

CSS Transition delay in but not out

Have the delay under your .active block, since the element has the active class when it is transitioning to green:

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 0.3s ease-out 0s;
}
.sample.active {
    background-color: green;
    transition: background-color 0.3s ease-in 1s;
}

JSFiddle

---

Related Topics