CODEWITHSUNDEEP
css
user3648083
user3648083

Reputation: 15

CSS Transitions Animate When Div No Longer Being Hovered

Hello I was working on this and I got it to smoothly animate when hovered I was wondering if there is a way so that it will animate back to 0 smoothly when it is no longer being hovered? http://jsfiddle.net/KeenanGalipeault/gY82Q/

<div></div>

div {
width: 300px;
height: 300px;
background: #262626;
transition: 0.6s;
}
div:hover {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 12px solid #0071bc;
}

Upvotes: 0

Views: 37

Answers (2)

user3644644
user3644644

Reputation:

You need to add an initial border for the transition to have an "out" reference, like this:

div {
    width: 300px;
    height: 300px;
    background: #262626;
    transition: 0.6s;
    border: 0 solid /* This is the initial border you have to add. 
                   Just add  a size (0) and a style (solid). 
                   No need to add an initial color, 
                       as in this case it'll be shown in the default 
                           state.*/
}

div:hover {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 12px solid #0071bc;
}

Here the fiddle: http://jsfiddle.net/gY82Q/2/

Upvotes: 0

Sandro Paganotti
Sandro Paganotti

Reputation: 2313

CSS transitions works better if both the 'ends' of the transition are explicit, in this case everything works fine by adding border: 0 solid #0071bc; to the first selector, here's the updated demo: http://jsfiddle.net/gY82Q/1/

div {
    width: 300px;
    height: 300px;
    background: #262626;
     box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    transition: 0.6s;
    border: 0 solid #0071bc;
}
div:hover {
    border: 12px solid #0071bc;
}

Upvotes: 2

Related Questions