Изменение на транзакцию CSS: скольжение вниз с эффектом размытия

Question

Изменить на CSS транзакция: скольжение вниз с эффектом размытия

Я хочу изменить этот эффект анимации css, как показано на изображении ниже. возможно ли это через JavaScript или CSS или используя оба. Любой орган может помочь мне решить эту проблему. заранее спасибо.

body {
     background-color: #222;
}
 .screen {
     background-image: url(https://41.media.tumblr.com/tumblr_lvv2z3bsYG1qz7u7yo1_1280.jpg);
     height: 540px;
     left: 50%;
     overflow: hidden;
     position: absolute;
     top: 100px;
     transform: translate(-50%);
     width: 960px;
     box-shadow: 0px 0px 40px #111;
}
 .screen:hover .pic1 {
     -webkit-filter: blur(20px);
     filter: blur(20px);
     transform: scale(1.1);
     opacity: 0;
}
 .screen:hover .pic2 {
     -webkit-filter: blur(0px);
     filter: blur(0px);
     transform: scale(1);
     opacity: 1;
}
 .pic1 {
     position: absolute;
     z-index: 2;
     transition: 0.4s;
     transform-origin: 50%, 50%;
}
 .pic2 {
     -webkit-filter: blur(20px);
     filter: blur(20px);
     transform: scale(1.1);
     opacity: 1;
     transition: 0.4s;
}
 .button {
     text-align: center;
     background-color: #aaa;
     height: 50px;
     width: 250px;
     border-radius: 25px;
}
 span {
     font-size: 20px;
     display: inline-block;
     margin-top: 15px;
     font-family: 'Helvetica';
     font-weight: bold;
     position: absolute;
}
 

<div class="screen">
<img class="pic1" src="https://41.media.tumblr.com/tumblr_m0u1feK1tA1r81skpo1_1280.jpg" alt="City" />
<img class="pic2" src="https://41.media.tumblr.com/tumblr_lvv2z3bsYG1qz7u7yo1_1280.jpg" alt="City" />
</div>

Answer 1

Это будет работать!

CSS:

animation: slideWithBlur 2s infinite  normal ease-out;

@keyframes slideWithBlur {
    0% {
        top:500px;
filter: blur(0px);
  -webkit-filter: blur(0px);
    }
10% {
        top:450px;
filter: blur(3px);
  -webkit-filter: blur(3px);
    }
20% {
        top:400px;
filter: blur(6px);
  -webkit-filter: blur(6px);
    }
30% {
        top:350px;
filter: blur(9px);
  -webkit-filter: blur(9px);
    }
40% {
        top:300px;
filter: blur(12px);
  -webkit-filter: blur(12px);
    }
50% {
        top:250px;
filter: blur(15px);
  -webkit-filter: blur(15px);
    }
60% {
        top:200px;
filter: blur(18px);
  -webkit-filter: blur(18px);
    }
70% {
        top:150px;
filter: blur(21px);
  -webkit-filter: blur(21px);
    }
80% {
        top:100px;
filter: blur(24px);
  -webkit-filter: blur(24px);
    }
90% {
        top:50px;
filter: blur(27px);
  -webkit-filter: blur(27px);
    }

100% {
        top: 0px;
filter: blur(30px);
  -webkit-filter: blur(30px);
    }
}