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

webkit transition not seeming to work in some box-shadow rules

webkit transition not seeming to work in some box-shadow rules

Problem

I want an expandable tree in a table cell. I got that to work. While playing around with it, I tried to add a transitioned box shadow. That works only at the root level. (JsFiddle).

The problem may have something to do with transitions not working on display (link). But does a display change foul up all transitions, or am I missing something? (I only put in a Webkit Transition.)

Thanks.

Problem courtesy of: RussAbbott

Solution

Edit: This might be a possible workaround, since the transition effect isn't working.

Have you tried using keyframe animations? I did some changes in the code. Here's a demo (jsFiddle).

I changed:

/* This transition seems to have no effect. */
    -webkit-transition: box-shadow 0.5s;
}  

to:

/* This transition seems to have no effect. */
    -webkit-animation: shadow 0.5s ease-in-out;
}  

@-webkit-keyframes shadow {
    0%   { box-shadow: 0px 0px 0px #000; }    
    100% { box-shadow: 4px 4px 7px #000; }
}
Solution courtesy of: Christofer Vilander

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

webkit transition not seeming to work in some box-shadow rules

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×