# Timing Animation Help

**URL:** <https://forums.kodeco.com/t/timing-animation-help/31569>\
**Category:** iOS Animations by Tutorials\
**Created:** [June 29, 2017, 9:48am UTC](https://forums.kodeco.com/t/timing-animation-help/31569 "2017-06-29T09:48:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmacka](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/tmacka/32/84894_2.png) [@tmacka](https://forums.kodeco.com/u/tmacka)\
**Post date:** [June 29, 2017, 9:48am UTC](https://forums.kodeco.com/t/timing-animation-help/31569/1 "2017-06-29T09:48:07Z")

</div>

I’m just working through the book, which is great, but I’m trying to make a circle expand to a count of 3 seconds, then pause for 3 seconds then shrink back down to the original size over 6 seconds - is there any way of doing this with autoreverse and changing timings please? Or any suggestions about how to achieve this please?  
Thank you

---

<div class="post-metadata">

**Author:** ![jonjones13](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jonjones13/32/71885_2.png) [@jonjones13](https://forums.kodeco.com/u/jonjones13)\
**Post date:** [June 29, 2017, 2:25pm UTC](https://forums.kodeco.com/t/timing-animation-help/31569/2 "2017-06-29T14:25:33Z")

</div>

This sounds like a pretty good use case for key frame animations, where you set the overall duration and then add keyframes for the individual components.

The code could look something like this:

```
UIView.animateKeyframes(withDuration: 1, delay: 0, options: [], animations: { ...

    UIView.addKeyFrame .... {
    //Add growth animation
    }

    UIView.addkeyFrame... {
    //Add reverse animation
    }

}

```

With keyframe animations you can specify the relative duration of the key frames (from zero to one) that will tell the animation what percent of the overall duration should be taken up with that specific keyframe animation.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![tmacka](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/tmacka/32/84894_2.png) [@tmacka](https://forums.kodeco.com/u/tmacka)\
**Post date:** [July 1, 2017, 8:19pm UTC](https://forums.kodeco.com/t/timing-animation-help/31569/3 "2017-07-01T20:19:15Z")

</div>

That’s great - thank you

---

<div class="post-metadata">

**Author:** ![tmacka](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/tmacka/32/84894_2.png) [@tmacka](https://forums.kodeco.com/u/tmacka)\
**Post date:** [July 6, 2017, 8:35am UTC](https://forums.kodeco.com/t/timing-animation-help/31569/4 "2017-07-06T08:35:05Z")

</div>

Just to follow up - I’m a little confused about using keyframes with constraint animations - for example :

```
@IBAction func startAnimation(_ sender: Any) {
     blnSizeStart = !blnSizeStart
    view.layoutIfNeeded()
    
    UIView.animateKeyframes(withDuration: 6, delay: 0, options: [], animations: {
        
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {
            self.imageWidthConstraint.constant = 200.0
            self.imageHeightConstraint.constant = 200.0
            //Add growth animation
        }
            )
        
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.75, animations: {
            self.imageWidthConstraint.constant = 150.0
            self.imageHeightConstraint.constant = 150.0
            //Add growth animation
        }
        )
    },

```

completion: nil  
)

/\* UIView.animate(withDuration: 6, delay: 0.0, options: .curveEaseIn, animations: {  
self.view.layoutIfNeeded()  
}, completion: nil) \*/  
}

To get the keyframe animations to work with keyframes, I presume I’m not sure if I need to add the commented code at the bottom somewhere and if so where? Thanks for any help.

---

<div class="post-metadata">

**Author:** ![jonjones13](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jonjones13/32/71885_2.png) [@jonjones13](https://forums.kodeco.com/u/jonjones13)\
**Post date:** [July 11, 2017, 8:46pm UTC](https://forums.kodeco.com/t/timing-animation-help/31569/5 "2017-07-11T20:46:48Z")

</div>

That’s a good question! I’m not 100% certain off the top of my head. My hunch, however, would that you would add it in both of the key frames (where you specify the constraint constants). This is probably a bit late, but thought I’d give you my 0.02.

Were you able to get it working?