CAKeyframeAnimation от css анимации

Я пытаюсь повторить анимацию CSS, используя CAKeyframeAnimation. Я устанавливаю те же параметры для CAKeyframeAnimation, но я получаю намного более быструю анимацию. Я что-то упустил или есть какая-то разница между параметрами CSS и CAKeyframeAnimation?

Вот классы анимации CSS

bounceInUp {
  0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

И CAKeyframeAnimation

CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position.y";
animation.values = @[ @(1500), @(-10), @(5), @(-2.5), @0.0];
animation.keyTimes = @[ @0.0, @.6, @.75, @0.9, @1.0];
animation.duration = 1;
animation.additive = YES;
animation.fillMode = kCAFillModeBoth;
animation.timingFunction =[CAMediaTimingFunction functionWithControlPoints:.215f :.61f :.355f :1.f];
[btn.layer addAnimation:animation forKey:@"btn"];

И вот что я получаю

анимация результата

0 ответов

Другие вопросы по тегам