--- title: "How to: Animate Size Changes by Using Key Frames" ms.date: "03/30/2017" helpviewer_keywords: - "key frames [WPF], animating size changes with" - "animation [WPF], size changes with key frames" - "size changes [WPF], animating with key frames" ms.assetid: 86bd2950-d4c9-4ec4-aa8d-7dc3ccadded4 --- # How to: Animate Size Changes by Using Key Frames This example shows how to animate size changes by using key frames. ## Example The following example uses the class to animate the property of an . This animation uses three key frames in the following manner: 1. During the first half second of the animation, uses an instance of the class to gradually increase the size of the arc. Linear key frames like create a smooth linear transition between values. 2. At the end of the next half second, uses an instance of the class to suddenly increase the size of the arc. Discrete key frames like create sudden jumps between values, that is, the size changes occur suddenly and are not subtle. 3. Over the final two seconds, uses an instance of the class to increase the size of the arc. Spline key frames like create a variable transition between values according to the values of the property. In this example, the size of the arc increases slowly at first and then increases exponentially toward the end of the time segment. [!code-xaml[keyframes_snip#SizeAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/SizeAnimationUsingKeyFramesExample.xaml#sizeanimationusingkeyframeswholepage)] For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation). ## See also - - - - - - - [Key-Frame Animations Overview](key-frame-animations-overview.md) - [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)