To create a fade in/fade out effect, follow these steps:

1. Open a scene.
2. Create an Image in the Hierarchy. To do so, go to Game Object | UI | Image menu on the top of the screen.
3. Image and Canvas game objects will be created in the Hierarchy.
4. Select the Image game object and set its name to BlackScreen.
5. Right-click on the Canvas game object and choose Create Empty to create an empty game object.
6. Set the name of the newly created game object to FadeAnimator. This object will animate the effect.
7. Set the Anchor Preset of the BlackScreen and FadeAnimator game objects to stretch in both X and Y coordinates, as shown in the following screenshot:

8. Set the Left, Top, Right, and Bottom position parameters to 0 in both the BlackScreen and FadeAnimator game objects. That will make the BlackScreen and FadeAnimator game objects cover the whole screen.
9. Parent the BlackScreen game object to the FadeAnimator game object in the Hierarchy.

10. Select the FadeAnimator game object and go to Window | Animation to open the Animation View.
11. Create a new Animation Clip by clicking on the Create button. Name the clip Alpha_0; this will be our default animation.
12. Make sure the record button is pressed and select the BlackScreen game object. Set its color to black with alpha channel set to 0 (also black). Also disable the BlackScreen game object. This Animation Clip should only have one key frame on the frame 0; delete any unwanted key frames. Disable the BlackScreen game object in this animator (set is as inactive). This way the object will not render when its alpha is 0 percent.
13. Select the FadeAnimator game object again and create another Animation Clip. Name it Alpha_100. The object in this animation should be enabled.
14. Make sure the record button is pressed and select the BlackScreen game object. Set its color to black and the alpha channel to 100 percent (white). Enable the BlackScreen game object (make sure a Game Object.Is Active property shows in the Animation View, and, if not, click on the game object's enable checkbox twice). This Animation Clip should also have only one key frame on the frame 0; remove any other key frames.
15. Select the FadeAnimator game object again and create another animation. Name it FadeIn. With the record button pressed, select the BlackScreen game object and create two key frames: one on frame 0 and one on 1-second mark. The BlackScreen game object should have a black color with alpha set to 0 percent (black) on the first frame and a black color with alpha set to 100 percent (white) on the second key frame. This is meant to be our fade to black animation. You should also enable the BlackScreen game object at frame 0 to make it render.
16. Select the FadeAnimator game object again and create another animation. Name it FadeOut. With the record button pressed, select the BlackScreen game object and create two key frames: one on frame 0 and one on 1-second mark. The BlackScreen game object should have a black color with alpha set to 100 percent (white) on the first frame and a black color with alpha set to 0 percent (black) on the second key frame. This is meant to be our fade from black animation. You should also disable the BlackScreen game object on the second key frame to prevent it from rendering despite its alpha is 0 percent.
17. Open the Animator Controller assigned to the FadeAnimator game object.
18. Create a Trigger parameter and call it Fade.

19. Create a loop of transitions (see the following screenshot for reference):

• Alpha_0 | FadeIn with the trigger Fade set as condition and Has Exit Time set to false.
• FadeIn | Alpha_100 with no conditions and Has Exit Time set to true.
• Alpha_100 | FadeOut with the trigger Fade set as condition and Has Exit Time set to false.
• FadeOut |Alpha_0 with no conditions and Has Exit Time set to true.

20. Write a script to set the Fade Trigger parameter in the Animator Controller. In this example, we use player input to set the Fade parameter. Whenever a player presses the space bar button, the Fade Trigger is set. You can find the Fade.cs script in the provided example Unity project in the Chapter 03 2D and user interface animationRecipe 05 Creating a fade out - fade in transition with the animation viewScripts directory:

       if (Input.GetKeyDown(KeyCode.Space)) 
        { 
             animator.SetTrigger("Fade"); 
        } 

21. Attach the script to the FadeAnimator game object.