更改为 CSS 事务：使用模糊效果向下滑动

Question

更改为 CSS 事务：使用模糊效果向下滑动

我想改变这个 css 动画效果，如下图所示。是否可以通过JavaScript 或CSS 或同时使用两者。 任何机构都可以帮助解决我的这个问题。 提前致谢。

如何将这些图像转换为这种 gif 图像类型：

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