--- title: "How to: Animate the Opacity of an Element or Brush" ms.date: "03/30/2017" helpviewer_keywords: - "opacity [WPF], animating" - "animation [WPF], Opacity property" ms.assetid: 572af23b-39dd-48d1-9db5-4bca56a4b3d3 --- # How to: Animate the Opacity of an Element or Brush To make a framework element fade in and out of view, you can animate its property or you can animate the property of the (or brushes) used to paint it. Animating the element's opacity makes it and its children fade in and out of view, but animating the brush used to paint the element enables you to be more selective about which portion of the element fades. For example, you could animate the opacity of a brush used to paint a button's background. This would cause the button's background to fade in and out of view, while leaving its text fully opaque. > [!NOTE] > Animating the of a provides performance benefits over animating the property of an element. In the following example, two buttons are animated so that they fade in and out of view. The Opacity of the first is animated from `1.0` to `0.0` over a of five seconds. The second button is also animated, but the Opacity of the SolidColorBrush used to paint its is animated rather than the opacity of the entire button. When the example is run, the first button completely fades in and out of view, while only the background of the second button fades in and out of view. Its text and border remain fully opaque. ## Example [!code-xaml[timingbehaviors_snip#10](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_snip/CSharp/OpacityAnimationExample.xaml#10)] Code has been omitted from this example. The full sample also shows how to animate the opacity of a within a . For the full sample, see the [Animating the Opacity of an Element Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/OpacityAnimation).