title: CALayer animation for width
body: <p>I have one view in which need to add one layer. I successfully added the layer but now i want to do animation for it's width means layer start filling from "started" label and end at "awaiting..." label. I try to add animation with <strong>CABasicAnimation</strong> it start from beginning but it not properly fill. Please check video like for more understanding. </p>
  
  <pre><code>func startProgressAnimation()
      {
          self.ivStarted.isHighlighted = true
          let layer = CALayer()
          layer.backgroundColor = #colorLiteral(red: 0.4980392157, green: 0.8352941176, blue: 0.1921568627, alpha: 1)
          layer.masksToBounds = true
  
          layer.frame = CGRect.init(x: self.viewStartedAwaited.frame.origin.x, y: self.viewStartedAwaited.frame.origin.y, width: 0.0, height: self.viewStartedAwaited.frame.height)
          self.ivStarted.layer.addSublayer(layer)
  
          CATransaction.begin()
  
          let boundsAnim:CABasicAnimation = CABasicAnimation(keyPath: "bounds.size.width")
          boundsAnim.fromValue = NSNumber.init(value: 0.0)
          boundsAnim.byValue = NSNumber.init(value: Float(self.viewStartedAwaited.frame.size.width / 2.0))
          boundsAnim.toValue = NSNumber.init(value: Float(self.viewStartedAwaited.frame.size.width))
          let anim = CAAnimationGroup()
          anim.animations = [boundsAnim]
          anim.isRemovedOnCompletion = false
          anim.duration = 5
          anim.fillMode = kCAFillModeBoth
  
          CATransaction.setCompletionBlock{ [weak self] in
              self?.ivAwaited.isHighlighted = true
          }
  
  
          layer.add(anim, forKey: "bounds.size.width")
          CATransaction.commit()
  
      }
  </code></pre>
  
  <blockquote>
    <p>Here is the video what i achieve with this code.
    <a href="https://streamable.com/h6tpp" rel="nofollow noreferrer">https://streamable.com/h6tpp</a></p>
  </blockquote>
  
  <p>Not Proper</p>
  
  <p><a href="https://i.stack.imgur.com/4Fagq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Fagq.png" alt="Not Proper"></a></p>
  
  <p>Proper image</p>
  
  <p><a href="https://i.stack.imgur.com/Lk6hX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lk6hX.png" alt="Proper image"></a></p>