Adding FadeOut in text moving animation

I am a newbie i just want to add fadeout in my text moving after it already finish moving. but the problem is i already put the @keyframe fadeout. and .fadeout. but it didnt work. Any help please? Thank you. This is the code.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h1>Watch me move</h1>

</body>
</html>

CSS

    body {
  font-family: sans-serif;
  margin: 50px;
}

h1 {
  animation: move 8s;
  -webkit-animation: move 8s;
}

@keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
        background:linear-gradient(transparent 150px, white);
  }
}

@-webkit-keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

}
  @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {

         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }

Solution

Unless you've got a reason to split it up you could just put it all in the same animation by adding one more step to it like this:

body {
  font-family: sans-serif;
  margin: 50px;
}

h1 {
  animation: move 3s forwards;
  -webkit-animation: move 3s forwards;
}

@keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  90% {
    margin-left: 0%;
    width: 100%;
    background:linear-gradient(transparent 150px, white);
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  90% {
    margin-left: 0%;
    width: 100%;
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h1>Watch me move</h1>

</body>
</html>