1. I created an oval object (no fill and a red border of 2 points) around another oval (with a black fill and no border)
    https://drive.google.com/file/d/1QfpgcMbsuu7Fsoy-lF0yz7gT1--mHVQ4/view?usp=sharing
  2. Then, I added another state to this red oval object. (red ring) (and changed the border start and endpoint from 0 - 2% (for 1st state) and 0-80%(for the second state))
    https://drive.google.com/file/d/14UGmYy5cYNM9Y7ATGCGqgstVNu5rKYmb/view?usp=sharing
  3. I then added an interaction to the first state, hover set as the trigger, and the action set to 'set state' to the second state(0-80%).
  4. I set the animation duration to 7000ms (because I wanted it to fill in 7 seconds) with no delay or loop.
  5. On previewing the animation, it transitions from 1st state to 2nd state instantaneously, irrespective of the duration set for the animation.
    (The video is attached below)

    I fail to understand, the underlying cause for this hiccup. 
    Any suggestions or guides are welcomed. 
    Thank you