Introducing key-frames

Key-frame animations enable us to do a number of things that we cannot do with the From, By, and To animations. Unlike those animations, with key-frame animations, we are able to specify more than two target values and animate objects in discrete steps that cannot normally be animated. As such, there are more <TypeName>AnimationUsingKeyFrames classes than <TypeName>Animation classes, for example: RectAnimationUsingKeyFrames, SizeAnimationUsingKeyFrames.

Each <TypeName>AnimationUsingKeyFrames class has a KeyFrames property that we populate with key-frames to specify various values that must be passed during the animation. Each key-frame has a KeyTime and a Value property to specify the value and the relative time that it should be reached.

If no key-frame is declared with a key time of zero seconds, the animation will start from the relevant property's current value. The animation will order the key-frames by the values of their KeyTime property, rather...