CSS3 div 过渡缓和

Question

我的问题是我想使 div 像 here . I have managed to extend the code to divs instead of articles in this JSFIddle 一样模糊和活跃，但问题在于过渡（如果模糊没有改变，请在框架中添加 jquery >2 和javascript 设置下的扩展，jsfiddle 没有这样做）。我想实现第一个 link 中的转换。他们是以下

transition: 
        opacity 0.2s linear, 
        text-shadow 0.5s ease-in-out, 
        color 0.5s ease-in-out;

任何帮助将不胜感激。

Answer 1

试试这个

.bluredDiv {
 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);
 width: 80%;
 height: 80%;
 transform: scale(.9);
 transition: transform 1000ms;
  }

.activeDiv {
 transform: scale(1);
 width: 80%;
 height: 80%;
 box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 1), 1px 11px 15px    10px rgba(0, 0, 0, 0.4);
 z-index: 100;
 transition: transform 500ms;
 }

.normailDiv {
 transform: scale(0);
 transition: transform 1000ms , opacity 400ms ;
 }

已更新Fiddlehttps://jsfiddle.net/rnu522qo/2/

CSS3 div 过渡缓和

CSS3 Transitions ease in for divs

javascript

css

jquery

css-transitions