css动画 - 从底部透露出模糊的幻灯片

Question

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

目前模糊的图像向上移动 - 但我只希望模糊＆＃39;向上移动我怎么能实现这个目标？也许没有重复图像可能吗？

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

你可以去除.blur div的高度而不是移动它，并使用图像作为背景来保持其大小，同时模糊消失：

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

#slideshow {
  margin: 0 auto;
  position: relative;
}

#slideshow>div {
  display: inline-block;
  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;
  animation-delay: 1s;
}

@keyframes slideUp {
  0% {
    bottom:0;
  }
  100% {
    bottom:100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div>
    <img src="https://c2.staticflickr.com/4/3559/3446613250_8569b7d582.jpg">
    <div class="blur" style="background-image:url(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" style="background-image:url(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" style="background-image:url(https://c2.staticflickr.com/6/5582/15049353751_d69ac63ce5.jpg)">
    </div>
  </div>

</div>

Answer 2

在隐藏溢出的情况下为模糊容器上的高度设置动画。

（简化为单个图像以便在此SO片段进行演示，完整版本在jsfiddle下方）

＆＃13;

＆＃13;

#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}
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

jsfiddle的完整示例

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