When a key frame animation begins, it iterates through the specified key frames in the order they were defined by their KeyTime properties. If there exists no key frame at time 0 (initial point), the animation creates a transition between the target property's current value and the Value of the first key frame defined in the collection.
If the animation's Duration is Automatic or set to the time of the last key frame, the animation ends.
In the preceding demonstration, the first key frame (at time 0) sets the animation's output value to Canvas.Left="50" and Canvas.Top="100". In the next key frame (at time 1 sec), the output value sets to the (450,200) coordinate point, and you will see a smooth transition between the (50,100) and the (450,200) points. Similarly, in the third and fourth seconds, the circle transitions from (450,200) to (450,50) and then to the (250,150) coordinate points.
As the defined Storyboard has an AutoReverse property...