在CSS3中轉換的延遲模糊濾鏡

Question

首先，我需要在加載后延遲轉換的元素上做一個褪色模糊。 第二個元素應該淡入。我正在使用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也變得模糊。 但這種模糊不是動畫而是沒有延遲。

Answer 1

正如評論中所提到的，有問題的代碼是向target元素添加transition和transition-delay ，但轉換發生時狀態沒有變化。

轉換只有在由於用戶交互而導致狀態發生變化時才會發生:hover ， :focus等，或者由於腳本在點擊或超時等情況下添加類別等等。因此，轉換不適合您的目的而且您應考慮使用animation代替。 與transition不同，動畫可以在頁面加載時自動啟動。

對於在頁面加載1秒延遲后要模糊的元素，將元素的原始狀態設置為不模糊狀態，然后將其設置to模糊狀態，如下面的代碼段所示。

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

Answer 2

既然你沒有專門要求一個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進行了更新