0

I'm trying to animate a DIV using CSS3 transitions. The example DIV is:

HTML:

<div class="element"></div>

CSS:

.element {
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform 2s linear, width 2s linear;
  position: absolute;
  left: 100px; top: 100px;
  height: 10px; width: 50px;
  background-color: black;
}

This means that the DIV occupies a region in its container from (100px, 100px) to (150px, 110px) - and the right edge is fixed at 150px.

I would like the DIV to maintain a static right edge at 150px whilst I translate the left edge off the screen, so I've been applying (via Javascript) a transition class to the DIV like so:

CSS:

.transition {
  -webkit-transform: translate3d(-200px, 0, 0);
  width: 150px;
}

The issue that I'm seeing is that the transition on the width does not keep up with the left edge of the translated DIV, so instead of increasing uniformly in size and left position, the right edge position fluctuates as the DIV slides off at a different rate, flickering slightly (depends on platform how much it flickers).

The issue occurs more vividly on Mobile Safari (a Phonegap webview on the iPhone is my main development platform), rather than on Chrome.

I've put a JSFiddle at http://jsfiddle.net/XwuBz/ which demos it (view it on an iPhone to see it occurring).

Is there another way to achieve this end result?

Thanks in advance,

Dan

Dan Smart
  • 1,042
  • 1
  • 10
  • 14

1 Answers1

0

Well, it seems that iOS Safari has some weird issues with transitions / transform.

I tried to achieve the same results with jQuery only, and it worked on iPhone 4s, iOS6:

$('.element').animate({left:'-=200','width':'+=200'},2000);

Here is a demo.

Giona
  • 20,734
  • 4
  • 56
  • 68