Use the Fade In and Fade Out animations to show and hide temporarily visible elements of your page. These animations are best used with elements that appear due to user interaction.
Fade In and Fade Out are implemented using CSS transitions. Because of this, the animation dictates the end state of every element and transitions to that state. Fade In will set the opacity value of the given element to 1. Fade Out will set the opacity value of the given element to 0.
Fade In and Fade Out animations work best with items that have an opacity value of 1 when visible. In the cases shown below, applying FadeIn and FadeOut to the parent element preserves an element's opacity values, whereas applying it to the individual element does not.