title: Animating a programmatically added UIView splits the width in half
body: <p>I am working on a very basic animation. A green line that's the full width of the main View, 30 pt tall, and animates from the bottom of the screen to the top of the screen.</p>
  
  <p>There's a button that triggers this animation. Before I press the button, the green view is full width. Great! When I press the button to animate it, the views width splits in half when it starts to animate.</p>
  
  <p>Here's what I have:</p>
  
  <p><strong>Class level</strong></p>
  
  <pre><code>let animatedLineView = UIView()
  let lineAnimation = CABasicAnimation(keyPath: "position")
  </code></pre>
  
  <p><strong>viewDidLoad</strong></p>
  
  <pre><code>super.viewDidLoad()
  animatedLineView.frame = CGRect(x: 0, y: self.view.bounds.height - 30, width: self.view.bounds.width, height: 30)
  animatedLineView.backgroundColor = UIColor.green
  self.view.addSubview(animatedLineView)
  </code></pre>
  
  <p><strong>Button</strong></p>
  
  <pre><code>@IBAction func testBtnPressed(_ sender: UIButton) {
      lineAnimation.duration = 5
      lineAnimation.fromValue = CGPoint(x: 0, y: self.view.bounds.height)
      lineAnimation.toValue = CGPoint(x: 0, y: 0)
      lineAnimation.autoreverses = true
      lineAnimation.repeatCount = 100
      animatedLineView.layer.add(lineAnimation, forKey: nil)
  }
  </code></pre>
  
  <p><strong>This is what the view looks like <em>before</em> the button is pressed</strong></p>
  
  <p><a href="https://i.stack.imgur.com/LnaPC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LnaPC.png" alt="Before button is pressed"></a></p>
  
  <p><strong>This is what the view looks like <em>after</em> the button is pressed</strong></p>
  
  <p><a href="https://i.stack.imgur.com/as4UQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/as4UQ.png" alt="After button is pressed"></a></p>
  
  <p><strong>Why is the green view halving in size, and what can I do to prevent that?</strong></p>