--- title: "How to: Animate a Matrix by Using Key Frames" ms.date: "03/30/2017" helpviewer_keywords: - "animation [WPF], Matrix properties with key frames" - "Matrix properties [WPF], animating with key frames" - "key frames [WPF], animating Matrix properties with" ms.assetid: b851a4c7-ecb1-420e-9203-83e7afd037fd --- # How to: Animate a Matrix by Using Key Frames This example shows how to animate the property of a by using key frames. ## Example The following example uses the class to animate the property of a . The example uses the object to transform the appearance and position of a . This animation uses the class to create two key frames and does the following with them: 1. Animates the first during the first 0.2 seconds. The example changes the and properties of the . This change causes the button to stretch and become skewed. The example also changes the and properties so that the button changes position. 2. Animates the second at 1.0 seconds. The button moves to another position while the button is no longer skewed or stretched. 3. Repeats the animation indefinitely. > [!NOTE] > Key frames that derive from the object create sudden jumps between values, that is, the movement of the animation is jerky. [!code-xaml[keyframes_snip#MatrixAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/MatrixAnimationUsingKeyFramesExample.xaml#matrixanimationusingkeyframeswholepage)] 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)