title: Repeat animation from left to right smoothly
body: <p>I'm trying to animate 3 squares from the left to the right. The squares should reappear from the left while they are disappearing from the right. The idea is that the squares represent clouds, so the idea is clear. </p>
  
  <p>This is what I currently got:</p>
  
  <pre><code>class ViewController: UIViewController {
  
      // contains the squares
      @IBOutlet weak var containerView: UIView!
  
      override func viewDidLoad() {
          super.viewDidLoad()
      }
  
      override func viewDidAppear(_ animated: Bool) {
          super.viewDidAppear(animated)
  
          startAnimating()
      }
  
      func startAnimating() {
          UIView.animateKeyframes(withDuration: 10, delay: 0, options: .repeat, animations: {
              self.containerView.center.x += self.view.bounds.width
  
          }, completion: nil)
      }
  }
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/E04wo.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E04wo.gif" alt="clouds"></a></p>
  
  <p>The squares move from the left to the right. This is good. The problem is that once the animation is done the squares just reappear from where they started. It isn't a smooth continuous movement where the clouds move from the left to the right and slowly reappear from the left again. How do you achieve this? Should there be a second containerView? Or remove the containerView and animate individual clouds? </p>
  
  <p>The answer Milan Nosáľ solved the problem. A note though:</p>
  
  <blockquote>
    <p>I placed containerView2 above containerView1 with the exact same
    constraints (they overlap each other). Just make sure IB doesn't
    include containerView2 as a subview of containerView1.</p>
  </blockquote>