Menu icon Foundation
img not smoothing after css @keyframe animation

I'm having trouble with scaled images which are animated using a css @keyframe rule - they are not being 're-rendered' or smoothed after the animation. The images have jagged edges in chrome and appear slightly blurry in safari.
Specifically, I have several jpg files (640 x 480) placed into a five column small-block-grid. With no animation, the images are perfectly smooth and automatically re-smoothed if the viewport size is changed. No problem here!

Also No Problem: With a CSS transition (controlling opacity in this case) applied directly to the li or the img, the images continue to be re-smoothed.

PROBLEM! : If a webkit-animation using a @keyframe rule is used to control the opacity, the images are not smoothed after the animation.

Unfortunately, this solution did not work for me: http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome

If I use smaller images which do not have to be scaled down to fit the containing li (that is to say rendered at natural size), there are no problems (even when the viewport is resized and they are scaled down) However, I think I should use the higher resolution files for hidpi displays.

Does anyone have any suggestions?

cssanimationimg scalingjagged edgeskeyframes

I'm having trouble with scaled images which are animated using a css @keyframe rule - they are not being 're-rendered' or smoothed after the animation. The images have jagged edges in chrome and appear slightly blurry in safari.
Specifically, I have several jpg files (640 x 480) placed into a five column small-block-grid. With no animation, the images are perfectly smooth and automatically re-smoothed if the viewport size is changed. No problem here!

Also No Problem: With a CSS transition (controlling opacity in this case) applied directly to the li or the img, the images continue to be re-smoothed.

PROBLEM! : If a webkit-animation using a @keyframe rule is used to control the opacity, the images are not smoothed after the animation.

Unfortunately, this solution did not work for me: http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome

If I use smaller images which do not have to be scaled down to fit the containing li (that is to say rendered at natural size), there are no problems (even when the viewport is resized and they are scaled down) However, I think I should use the higher resolution files for hidpi displays.

Does anyone have any suggestions?

Karl Ward over 5 years ago

Would you happen to have a link to the page where this is occurring? I have been dealing a lot with images rendering in CSS transform animations/transitions, and how they degrade in certain browsers.

I would like to see what transformations you are applying, and how they end ... Also, are the edges jagged if you don't use animation, and just apply the transform without animation?

Steve Alpine over 5 years ago

I don't have a link because it is just on a local machine for now but I made this pen:

http://codepen.io/stevealpine/pen/igLhj

there are 3 sets of images (each has a row of 64 px which remains natural and a 512 px which gets scaled)

first set - no fade, all good

second set - faded with keyframe rule animation (64 px ok, 512 px scaled images are jagged in chrome)

third set - faded with transition (in this case simply on page load) - all good

So, to answer your question Karl the edges are only jagged in the animation version.

kept this simple and only put in -webkit- css rules

The pen appears OK in safari, but on the local machine with higher resolution jpg images, the scaled 512 which are jagged in chrome are pretty blurry.

I'm trying to do a multi step animation, first on the img and then on the containing li - that is why i'd like to use @keyframes animation.

thanks for any help!

Karl Ward over 5 years ago

I checked your codepen, and also tried several reported remedies, and some of my own with no effect. It does not seem solvable ... It does not seem directly related to the "jaggy bug" reported in various forums, because the jaggedness is much less visible. I managed to remove the jaggedness by scaling the images up with -webkit-transform: scale3d(2,2,2), but I can't say why that helps as setting 1.01,1.01,1.01 did nothing.

You might need to consider your options:

  • Compromise, and stick with transition (no multi-step animations).

  • Consider a JS library, like Greensock
    http://www.greensock.com/

  • Use javascript transitionend event to trigger new transitions. Something like this:

 $('#element').on('webkitTransitionEnd moztransitionend transitionend oTransitionEnd', function () {
    $('#element').removeClass('currentTransition');
    $('#element').addClass('someNewTransition');
});

In the above, you would need to use conditions to add transition classes based on what class you currently find on the element, until you reach the last transition and do nothing.

Steve Alpine over 5 years ago

Thank you for the helpful suggestions. Using the transitionend event I've been able to create the desired two step transition and the scaled images are being smoothed as exected (no jaggedness, blurriness in various browsers).
This option does work, but I'd really like to understand why the @keyframe animation results in the degraded image quality in this specific scenario (and if there is a way to make it work).