When animatingIn (in reverse), some elements within a frame snap to their end point without animating

[IanLunn]

In the following example, the .iphone element should rotate from -40deg to 0 when animating in (in reverse):

.iphone{
    left: -450px;
    opacity: 1;
    position: absolute;
    top: -550px;
    -webkit-transform: rotate(-40deg);
    -webkit-transition-duration: 1.5s;
}

.iphone.animate-in{
    left: 600px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 50px;
    -webkit-transform: rotate(0deg);
    -webkit-transition-duration: 1.5s;
}

.iphone.animate-out{
    left: 1100px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    top: -400px;
    -webkit-transform: rotate(-40deg);
    -webkit-transition-duration: 1s;
}

Due to the rotate property of .animate-out being different to .animate-in, the frame doesn't animate and instead just snaps to its new position.

By changing the rotate value of .animate-out to 0deg (the same as .animate-in), the animation works as expected.

[IanLunn]

This issue is happening across all browsers but not necessarily consistently between them. A quick fix is to not initiate animateIn() immediately, using a setTimeout with 50ms seems to give the browser enough time to sort itself out and work around the issue.

This may be down to CPU performance. Will need to test on multiple machines.

[IanLunn]

This may have been fixed during optimisation of code. Elements were getting reset to their animate-out position multiple times which wasn't necessary. More testing required to confirm this.