CSS3中带有过渡的延迟模糊过滤器答案

【问题标题】：Delayed blur-filter with transition in CSS3CSS3中带有过渡的延迟模糊过滤器
【发布时间】：2015-12-24 00:18:27
【问题描述】：

我需要先对元素进行褪色模糊处理，并在加载后延迟过渡。其次应该淡入另一个元素。我正在使用 animate.css。

我正在使用 animate.css。

HTML

    <div class="main">
        <div class="wrapper">
            <div id="target" class="blur>This element has a background-image, which should be blured</div>
        </div>
        <div class="content-layer">
            <input id="searchMain" class="animated fadeIn delay">
        </div>
    </div>

CSS

.blur {
    -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
        -ms-filter: blur(5px);
         -o-filter: blur(5px);
            filter: blur(5px);

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;

    -webkit-transition-delay: 1s;
            transition-delay: 1s;
}
.delay {
    -webkit-animation-delay: 1s;
       -moz-animation-delay: 1s;
            animation-delay: 1s;
}

有了这个，inputField 的延迟淡入效果很好。 target 也变得模糊。但这种模糊不是动画的，也不是延迟的。

【问题讨论】：

您要么没有向我们展示完整的代码（或者）您对转换的理解不正确。在target 上发生的转换没有状态更改。另一方面，动画不需要状态更改，可以自动启动。
好吧，你是对的：看来，我不理解转换。那么我必须改变什么才能以正确的方式做到这一点？输入框的动画有效，所以我想，我对模糊做同样的事情......
那么您是否正在寻找页面加载时元素在延迟 1 秒后模糊的动画？
@Ashiquzzaman：CSS3 仍然是 CSS，不需要删除那个标签。
@Harry：是的，正确。我想在页面加载后延迟 1 秒做一个褪色的模糊。

标签： css css-transitions css-animations

【解决方案1】：

由于您不是专门要求仅使用 CSS/HTML 的解决方案，因此这里有一种方法可以通过添加一些 jquery 来获得您想要的结果。

<div class="main">
    <div class="wrapper">
        <div id="target" class=">This element has a background-image, which should be blured</div><!-- Start without classes -->
    </div>
    <div class="content-layer">
        <input id="searchMain" class="animated fadeIn delay"> 
    </div>
</div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" defer>
    $(function() {
        setTimeout(function(){
            console.log('done waiting!'); // Just to verify the delay works
            $('#target').addClass('blur');
        }, 1000); // A delay of 1000ms
    });
</script>

不用说，请确保动画按您的意愿工作。这只是页面加载后的延迟。从这里开始也很容易在此基础上进行构建。比如当用户滚动到元素时添加动画等等。

为#target 更新

【讨论】：

输入字段的动画已经开始工作（没有任何脚本），但有延迟（参见延迟类）。问题是将模糊效果延迟到.target。
刚刚更新了代码，以便在 1 秒后将模糊添加到 #target。我误解了那部分。不过解决方法是一样的。

【解决方案2】：

如 cmets 中所述，有问题的代码是在 target 元素中添加 transition 和 transition-delay，但没有发生转换的状态变化。

只有当状态发生变化时才会发生转换出于您的目的，您应该考虑改用animation。与transition 不同，动画可以在页面加载时自动启动。

对于在页面加载延迟 1 秒后模糊的元素，将元素的原始状态设置为未模糊状态，然后将其动画to 模糊状态，如下面的 sn-p。

#target{
  height: 100px;
  width: 500px;
  background: url(http://lorempixel.com/500/100);
}
.blur {
  -webkit-animation: blur 0.5s linear forwards;
  -moz-animation: blur 0.5s linear forwards;
  -ms-animation: blur 0.5s linear forwards;
  -o-animation: blur 0.5s linear forwards;
  animation: blur 0.5s linear forwards;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
.delay {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@-webkit-keyframes blur {
  to {
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }
}
@-moz-keyframes blur {
  to {
    -moz-filter: blur(5px);
    filter: blur(5px);
  }
}
@keyframes blur {
  to {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px);
  }
}

<div class="main">
  <div class="wrapper">
    <div id="target" class="blur">This element has a background-image, which should be blured</div>
  </div>
  <div class="content-layer">
    <input id="searchMain" class="animated fadeIn delay">
  </div>
</div>

【讨论】：

有效！谢谢。