Help with project

Web Development Front-End
1

Hello, I am trying to get my screen 4 go blurry to sharp with the text and the background sharp to blurry when I scroll to it. I’ve been trying for hours.

Exercise 13 - Parallax body{margin:0;} 
    section{height:100vh;
        text-align:center;
        color:#fff;
        overflow:hidden;
        background:#000;
    }
   h1{font-size:4em;
       font-weight:normal;
       margin-top:42vh;
       position:relative;
    }
    
    #screen2{background-attachment: fixed; background:url(background-dark-blue.jpg) center center no-repeat; background-size:cover;}
    
    #screen3{background:#1d2a48;}
    
    @keyframes sharpEffect {

0% {
filter: blur(5px);
}
100% {
filter: sharp(0px);
}
}

@keyframes blurEffect {
0% {
filter: sharp(0px);
}
100% {
filter: blur(5px);
}
}

#screen4 {
animation: sharpEffect 4s ease-in-out forwards;
}

#falseBackground {
position: absolute;
width: 100%;
height: 100%;
background:url(background-glass.jpg) center center no-repeat;
background-size:cover;
animation: blurEffect 4s ease-in-out forwards;
}

</style>

<section id="screen1">
    <h1
    data-start="top:0px; opacity:1;"
    data-top="top:-300px; opacity:0;"
    >Exercise 13 - Parallax</h1>
</section>


<section id="screen2">
    <h1>Curtain effect</h1>
</section>


<section id="screen3">
    <h1
    data-bottom-top="transform:scale(3)"
    data-top-bottom="transform:scale(.2)"
    >Scaling</h1>
</section>


<section id="screen4">
  <div id="falseBackground"></div>
    <h1>Blurring</h1>
  </section>



  <script src="skrollr.min.js"></script>
  <script>
    var s = skrollr.init();
  </script>