Grow your CSS skills. Land your dream job.

Problems with PNG animation

  • # June 7, 2012 at 9:26 am

    Greeting.

    I am currently working on a project which I need to make a PNG animation.

    I don’t want to use GIF as it doesn’t support semi transpirant background.

    I have tried APNG, which is animated PNGs, but I could not get that to work for some reason?
    Are APNG supported for browsers?

    I have also tried using this jAni, which is a jQuery plugin to make animations from sprites, but I can only get it to work in Google Chrome, and still there is a problem, cause when I zoom in or out in Chrome the animation gonna be wierd.

    The source of jAni can be found here:
    http://www.ajaxblender.com/jani.html

    And you can see my current project, where I am running jAni:
    http://www.marktopper.dk/goo
    Note: I am running jAni on the fly machine a little down at the page.

    Hope that someone could help me with my PNG Animation Problem.

    # June 7, 2012 at 10:02 am

    As far as I know, few browsers support ANPGs except possibly FF and Opera 11+ (http://www.caniuse.com/#search=animated)

    At the moment, if you want that kind of animation, SVGs or Flash are your only realistic options.

    # June 7, 2012 at 10:21 am

    Thanks a lot.

    By I try searched for APNG instead of just Animated, as animated might be animated GIFs aswell I think.

    And Firefox and Opera seems to support APNG, but not any others.

    Does anyone have any alternatives for this which I can use for the other browsers?

    # August 17, 2012 at 12:53 pm

    this doesn’t help much, but you can get away with a lot of PNG animation by manipulating ele.style.backgroundPosition of divs via JS. It could do everything your site is doing for IE FF C. It’s more code, but it works.

    My crimegameonline.com does a lot of PNG animation in it’s home page, but I’m having problems on IE only because I’m changing images by the millisecond. Its some download cache problem, fixable I think.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".