Question

I have the following code that simply moves my image across the screen:

                /* This is the animation code. */
        @-webkit-keyframes example {
   from { -webkit-transform: translateX(0px); }
   to   { -webkit-transform: translateX(1900px) }
}

        /* This is the element that we apply the animation to. */
        img#container {
            -webkit-animation: example 1s ease 0s 1 normal;
        }

The problem I can’t wrap my head around is setting the translateX animation value to something calculated in javascript, such as the x position of the center of the screen. Is there any way to set the “to” attribute in javascript and then apply the id name?

Answer 1

To set the CSS3 transform values consider using jQuery and the .transit plugin. That webpage has demo’s of different CSS3 animation effects explained.

Example:

$('#container').transition({ x: '1900px' });

Looking at their source code, you will see that to do various effects in jQuery is tedious since a whole lot of relative style information is needed to created the desired output. Then to convert that jQuery into pure JavaScript equivalents is something to behold.

Test .transit Plugin with translate X: jsFiddle