--- title: "How to: Animate an Object by Using Key Frames" ms.date: "03/30/2017" helpviewer_keywords: - "animation [WPF], objects with key frames" - "key frames [WPF], animating objects with" ms.assetid: b1f15ba9-cac7-4cea-8699-5c6b55c05c5e --- # How to: Animate an Object by Using Key Frames This example shows how to animate an object, which in this example is the property of a control, by using key frames. ## Example The following example uses the class to animate color changes for the property of a control. The example animation changes to a different background brush at regular intervals. This animation uses the class to create three different key frames. The animation uses key frames in the following manner: 1. At the end of the first second, animates an instance of the class. This section of the example applies a linear gradient to the background color so that the color transitions from yellow to orange to red. 2. At the end of the next second, animates an instance of the class. This section of the example applies a radial gradient to the background color so that the color transitions from white to blue to black. 3. At the end of the third second, animates an instance of the class. This section of the example applies a checkerboard pattern to the background. 4. The animation begins again and repeats indefinitely. > [!NOTE] > is the only type of key frame that you can use with the class. Key frames like create sudden changes in values, that is, the color changes in this example occur suddenly. [!code-xaml[keyframes_snip#ObjectAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/ObjectAnimationUsingKeyFramesExample.xaml#objectanimationusingkeyframeswholepage)] 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)