Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Transition Ease in and out Box Shadow

CSS3 Transition Ease in and out Box Shadow

Problem

I am trying to get div id to ease in and out of a Box Shadow using CSS3.

The current CSS I have is:

#how-to-content-wrap-first:hover {
-moz-box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-box-shadow: 0px 0px 5px #1e1e1e; 
box-shadow: 0px 0px 5px #1e1e1e;
-webkit-transition: box-shadow 0.3s ease-in-out 0s;
-moz-transition: box-shadow 0.3s ease-in-out 0s;
-o-transition: box-shadow 0.3s ease-in-out 0s;
-ms-transition: box-shadow 0.3s ease-in-out 0s;
transition: box-shadow 0.3s ease-in-out 0s; 

The issue I am having is that on the first hover of the element there is no easing in or out and then any subsequent hovers ease in but do not ease out.

Any advice people have would be much appreciated?

Problem courtesy of: Tom Pinchen

Solution

You need to use transitions on .class and not .class:hover

Demo

div {
    height: 200px;
    width: 200px;
    box-shadow: none;
    transition: box-shadow 1s;
    border: 1px solid #eee;
}

div:hover {
    box-shadow: 0 0 3px #515151;
}
Solution courtesy of: Mr. Alien

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Transition Ease in and out Box Shadow

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×