0

Hi I'm learning to create some hover effects and managed to pull off what I had in mind with this animation: http://jsbin.com/xawibo/

The CSS that animates the image is this:

transform: scale(3, 3) translateY(50%);

But the animation is not smooth. The thumbnail becomes blurry during the transition, becoming crisp again only when the transition stops. There is also a slight left/right jerky movement.

Here is a quick Youtube video of what I see:

https://www.youtube.com/watch?v=yoIgV1ORbN8&feature=youtu.be

What am I doing that is affecting the perforamce of this animation? Am I nesting too many DIVs?

codemon
  • 1,456
  • 1
  • 14
  • 26
  • I don't think there's a way around the image blurring - during transition the image will blur, that's the nature of animating images. I would say this is something that the developer notices far more than the user - to me this animation looked great the first time, I had tow view twice to see the issue. – Toby Jul 30 '16 at 00:50
  • 1
    Are you viewing in Chrome? I forgot to mention I notice this in chrome and cannot test other browsers ATM. – codemon Jul 30 '16 at 00:52
  • Yes, chrome on a mac – Toby Jul 30 '16 at 00:53

2 Answers2

1

This happens on chrome on Windows apparently.

Seems very similar to the issue depicted here: CSS transition effect makes image blurry / moves image 1px, in Chrome?

What happens when using -webkit-transform: [...] along with transform: [...] ?

Community
  • 1
  • 1
codeSwim
  • 115
  • 1
  • 8
  • Thank you I tried the fix from that other SO question but nothing happened. And I just tried using -webkit- no dice. I am on windows 10. I added a video of what I see in the original post. – codemon Jul 30 '16 at 01:06
  • I looked at the video, it's very similar to what I'm getting on chrome, both on Windows7 and Windows10. – codeSwim Jul 31 '16 at 15:24
1

Seems like Chrome specific issue.

Instead of transform:scale() you can animate width: 

.caption:hover > span img{
  background: rgba(0, 158, 205, 0.45);
  transform: translate(0,10%) ;
  width:100%;
}
c-smile
  • 26,734
  • 7
  • 59
  • 86
  • Thanks! I tried it and it performs much better! However there is still a slight nudge to the right – codemon Jul 30 '16 at 01:08