title: UIView animateKeyframes not working
body: <p>I am attempting a keyframe animation where a view is faded in, then transformed (panning and zooming), then transformed again after a delay, then faded out.  The problem I am running into is the second transform starts immediately after the first transform ends, instead of respecting the delay value.  This seems to only happen when it is modifying the transform again, so I suspect the problem is coming from trying to do two different transform changes in the same keyframe block, although I don't understand why this would not be allowed because the animation durations are not overlapping.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>[UIView animateKeyframesWithDuration:15.0 delay:0.0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^
          {
          [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.1 animations:^
              {
              self.imageViewCurrent.alpha = 1.0;
              }];
          [UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.1 animations:^
              {
              self.imageViewCurrent.transform = self.imageDataCurrent.transform2;
              }];
          [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.4 animations:^
              {
              self.imageViewCurrent.transform = self.imageDataCurrent.transform3;
              }];
          [UIView addKeyframeWithRelativeStartTime:0.9  relativeDuration:0.1 animations:^
              {
              self.imageViewCurrent.alpha = 0.0;
              }];
          }
  </code></pre>
  
  <p>These are the transforms being used:</p>
  
  <p>Starting transform:
   (a = 5, b = 0, c = 0, d = 5, tx = 950, ty = 850)</p>
  
  <p>transform2: 
   (a = 5, b = 0, c = 0, d = 5, tx = 1250, ty = -1500)</p>
  
  <p>transform3:
   (a = 2.5, b = 0, c = 0, d = 2.5, tx = -250, ty = 0)</p>
  
  <p><strong>Update 1:</strong></p>
  
  <p>I am not using auto-layout.</p>
  
  <p><strong>Update 2:</strong></p>
  
  <p>I have done some more tests and determined that it is indeed the two transform modifications that are causing the problem.  If I replace one of the transform modifications with a change to alpha, all the animation timing works normally. As best as I can tell at this point, it is a bug with UIKit animations.</p>
  
  <p><strong>Work-around:</strong></p>
  
  <p>I found that by using core animation directly, I was able to avoid this issue.  This code produces about the same effect but without the bug:</p>
  
  <pre><code>// Fade in, pause, fade out.
  CAKeyframeAnimation *alphaAnim = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
  alphaAnim.keyTimes = @[@(0.0), @(0.1), @(0.9), @(1.0)];
  alphaAnim.values = @[@(0.0), @(1.0), @(1.0), @(0.0)];
  alphaAnim.duration = 15.0;
  [self.imageViewCurrent.layer addAnimation:alphaAnim forKey:@"opacity"];
  
  // Translate, wait on second translation, translate again.
  CAKeyframeAnimation *transformAnim = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
  transformAnim.keyTimes = @[@(0.3), @(0.4), @(0.5), @(0.8)];
  transformAnim.values = @
      [
      [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(self.imageDataCurrent.transform1)],
      [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(self.imageDataCurrent.transform2)],
      [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(self.imageDataCurrent.transform2)],
      [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(self.imageDataCurrent.transform3)]
      ];
  transformAnim.duration = 15.0;
  [self.imageViewCurrent.layer addAnimation:transformAnim forKey:@"transform"];
  </code></pre>