Question

So I’ve been working on a simple launch page today for an application i’m working on

I wanted to put a moving background (parallax esque) using some css animation as shown here
http://css-tricks.com/parallax-background-css3/

I used the background-position move in a keyframe config through the webkit animate function

here is a sample

#BigWrapper{
    -webkit-animation-name: MOVE;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-animation-duration: 250s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
     @-webkit-keyframes MOVE {
     from {

     background-position: 5% 5%;

    }
    to {
        background-position: 1300% 600%;
    }
    }

This produced fairly poor performance. the background image is a png32 with transparency
compressed to 896kb. I tried initiating hardware acceleration using a blank translate3d statement but no visible change occured.

I also tried changing the background-position to translate3d instead and it moved the whole
div along with the content it contains. i’m not sure how to produce this effect without performance hits.

here is the test site http://www.auroragm.sourceforge.net

Answer 1

Turns out All I had to do was to tell the browser to stop caching each time there was an update, which apparently helps a lot:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Did the trick 🙂