jquery - css 动画 - 模糊的幻灯片从底部显示

Question

我正在尝试创建一个幻灯片放映，您首先看到的图像具有模糊效果，然后从底部向上滑动过渡并显示清晰的图像。

目前模糊图像向上移动 - 但我希望只有“模糊”向上移动。我怎么能做到这一点？也许可以不复制图像？

https://jsfiddle.net/78vagwja/6/

CSS:

#slideshow { 
    margin: 0 auto; 
    position: relative; 
}
#slideshow .blur { 
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    z-index: 10;
    animation: slideUp 1s both linear;
    transform: translate3d(0, 0, 0);
    animation-delay: 1s;
}
@keyframes slideUp {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -100%, 0); }
}

HTML:

<div id="slideshow">
   <div>
     <img src="https://c2.staticflickr.com/4/3559/3446613250_8569b7d582.jpg">
     <div class="blur">
        <img src="https://c2.staticflickr.com/4/3559/3446613250_8569b7d582.jpg">
      </div>
   </div>

   <div>
     <img src="https://c1.staticflickr.com/9/8390/8572035019_0577667f3d.jpg">
     <div class="blur">
      <img src="https://c1.staticflickr.com/9/8390/8572035019_0577667f3d.jpg">
     </div>
   </div>
   <div>
     <img src="https://c2.staticflickr.com/6/5582/15049353751_d69ac63ce5.jpg">
     <div class="blur">
      <img src="https://c2.staticflickr.com/6/5582/15049353751_d69ac63ce5.jpg">
     </div>
   </div>

</div>

JS:

$("#slideshow > div:gt(0)").hide();
setInterval(function() { 
    $('#slideshow > div:first')
        .hide()
        .next()
        .show()
        .end()
        .appendTo('#slideshow');
    },  4000);

Answer 1

overflow hidden 的模糊容器上的高度动画。

(在此 SO 片段中简化为单个图像以进行演示，完整版本在下面的 jsfiddle 中)

#slideshow { 
    margin: 0 auto; 
    position: relative; 
}
#slideshow .blur { 
    position: absolute; 
    top: 0;
    left: 0;
    z-index: 10;
    animation: slideUp 2s both linear infinite;
    transform: translate3d(0, 0, 0);
    animation-delay: 1s;
    overflow:hidden;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

@keyframes slideUp {
	0% { max-height: 100%}
	100% { max-height:0px}
}

<div id="slideshow">
       <div>
         <img src="https://c1.staticflickr.com/9/8390/8572035019_0577667f3d.jpg">
         <div class="blur">
          <img src="https://c1.staticflickr.com/9/8390/8572035019_0577667f3d.jpg">
         </div>
       </div>
  
  </div>

jsfiddle 中的完整示例

https://jsfiddle.net/30fb8L99/4/