Change to CSS transaction : sliding down with Blur effect

Question

Change to CSS transaction: sliding down with Blur effect

i want to change this css animation effect as this image shown below. is it possible throught JavaScript or CSS or using both. Any body can help to make solve my this problem. thanks in advance.

How to change these image transction into this gif image type:

 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

This will work!

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);
    }
}