Delay mouseout/hover with CSS3 transitions

Question

I've got a box that changes size when being hovered. However, I would like to delay the mouseout stage, so that the box keep the new size for a few seconds, before getting the old size back.

div {
    width: 70px;
    -webkit-transition: .5s all;    
}

div:hover {
    width:130px;
}

Is this possible to do WITHOUT Javascript and only CSS3? I only have to care about supporting webkit.

have you tried css3 animation property? i have tried some things with animation property, but i am not sure that is what you want. but if you want i can give you that. — Shabib
– Shabib, Commented Feb 22, 2012 at 11:01

L84 · Accepted Answer · 2016-02-12 02:19:53Z

50

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

edited Feb 12, 2016 at 2:19

L84

46.5k59 gold badges183 silver badges260 bronze badges

answered Feb 22, 2012 at 11:47

patad

9,72211 gold badges43 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Mullany Over a year ago

edited to add non webkit prefixes too - it's just good practice

Screenack Over a year ago

on the "div" tag definition, isn't specifying "transition:" and "transition-delay" essentially a duplicate? The first value of the transition spec IS the delay value, no?

Sandwich Over a year ago

@Screenack No, the first value is the duration of the transition - how long it takes to complete once it gets going.

Mindwin Remember Monica Over a year ago

awesome use of transitions, patad.

Jenny · Accepted Answer · 2015-05-05 16:39:03Z

9

transition can be declared as

transition: .5s all 5s

(shorthand, the first number is duration, the second number is delay) then you don't need the separate transition-delay

sorry, can't add as a comment as I don't have enough points

answered May 5, 2015 at 16:39

Jenny

1431 silver badge6 bronze badges

Collectives™ on Stack Overflow

Delay mouseout/hover with CSS3 transitions

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related