IanLunn/Sequence — Issue #22: When animatingIn (in reverse), Transform Rotate causes a frame not to animate in
Author: IanLunn
Created: 2012-02-01 11:19:21+00:00
State: open

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.