更改為 CSS 事務：使用模糊效果向下滑動

Question

更改為 CSS 事務：使用模糊效果向下滑動

我想改變這個 css animation 效果，如下圖所示。 是否可以通過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);
    }
}