--- title: "How to: Animate the Thickness of a Border by Using Key Frames" ms.date: "03/30/2017" helpviewer_keywords: - "animation [WPF], border thickness with key frames" - "key frames [WPF], animating border thickness with" - "border thickness [WPF], animating with key frames" ms.assetid: 3a9cb463-0a63-407d-aae7-3fbb1a559947 --- # How to: Animate the Thickness of a Border by Using Key Frames This example shows how to animate the property of a . ## Example The following example uses the class to animate the property of a . This animation uses three key frames in the following manner: 1. During the first half second, uses an instance of the class to gradually increase the thickness of the border. The example uses to create a smooth linear increase between values. 2. At the end of the next half second, uses an instance of the class to suddenly increase the thickness of the border. Discrete key frames like those derived from create sudden jumps between values, that is, the movement of the animation is jerky. 3. During the final two seconds, uses an instance of the class to decrease the thickness of the border. Spline key frames like those derived from create a variable transition between values according to the values of the property. In this key frame, the animation starts off slow and speeds up exponentially toward the end of the time segment. [!code-xaml[keyframes_snip#ThicknessAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/ThicknessAnimationUsingKeyFramesExample.xaml#thicknessanimationusingkeyframeswholepage)] 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) - [Animate a BorderThickness Value](../controls/how-to-animate-a-borderthickness-value.md)