CODEWITHSUNDEEP
cssfiltercss-transitions
user2238144
user2238144

Reputation: 11

CSS: Transition on shadow filter

so I'm trying to cast a shadow onto a non-rectangular object in a png file with transparency. That works so far, but when I try to add a transition effect on hovering over the image, the filter seem to max out their set value and then quickly bounce back to the actual set value when the timer from the transition feature is up. I'm running Chrome 28 Mac but also appears on Safari.

I have demonstrated this effect here: http://jsfiddle.net/dbananas/3pMS8/

transition: all 0.2s ease-in-out;
-webkit-filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.9));

Recommendations anyone who to fix this and make the transitions smooth?

Thanks, db

Upvotes: 1

Views: 3213

Answers (2)

Stephen White
Stephen White

Reputation: 126

That does look like a bug. It looks like the shadow radius is being treated differently while the animation is in progress (and accelerated filters are applied). I've logged this for Chrome as http://crbug.com/266957

As a workaround, you can apply -webkit-transform: translateZ(0) to the element with the shadow, which will force it to always be accelerated.

Upvotes: 0

Shauna
Shauna

Reputation: 9596

I'd check to see if this works and happens in Firefox. If I had to guess, I'd say it's a bug in Webkit (checking in Firefox can help confirm that it's a browser bug and not a bug in your code). You can file a bug report for it here: https://bugs.webkit.org/

That said, in order to work around it, you might have to reconsider how you're going about solving your problem.

For example, if you're doing it for text, you can use the text-shadow property, which is animatable.

If it's an actual image, you could resort to making a "shadow image" that you could fade the opacity on (if you're using this on a content image), or swap to (if you're swapping background images).

Edit I found this tutorial, which may be of use to you. It's an image cross-fade effect, like what I previously suggested. It has a few different variations (including a pure CSS one), so you can probably adapt it to make it work for you. Basically, you add a background to the img, then fade in/out the img element itself to create the effect. I'd agree that it's not ideal (your -webkit-filter technique is arguably superior, if it worked properly in the browsers).

Upvotes: 0

Related Questions