Retard de flou-filtre avec de transition en CSS3

J'ai besoin de faire d'abord un fondu de flou sur un élément avec un retard de la transition après le chargement. Deuxième d'un autre élément doit être décoloré. Je suis à l'aide d'animer.css.

Je suis à l'aide d'animer.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;
}

Avec ce, le retard de fondu de la inputField fonctionne très bien. Le target est également floue. Mais ce flou n'est pas animé et non retardée.

Vous n'êtes pas de nous montrer le code complet (ou) de votre compréhension des transitions est incorrect. Il n'y a pas de changement d'état pour une transition pour arriver sur le target. Animations, en revanche, n'a pas besoin d'un changement d'état et peut se lancer automatiquement.
Ok, vous avez raison: Il semble, que je ne comprends pas les transitions. Alors, que dois-je changer de le faire d'une manière correcte? L'animation de la zone de saisie fonctionne, alors j'ai pensé, que je fais la même chose pour le flou...
Si vous cherchez une animation de chargement de page où l'élément estompe après un délai de 1s?
CSS3 est encore CSS et il n'était pas nécessaire de supprimer cette balise.
Oui, c'est exact. Je veux faire un fondu flou après pageload avec un retard de 1s.

OriginalL'auteur user3142695 | 2015-09-26

  1. -2

    Puisque vous n'êtes pas venu demander un CSS/HTML, la seule solution ici est une façon d'obtenir ce que vous voulez en y ajoutant un peu de jquery pour le mélange.

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

    Inutile de dire, assurez-vous que les animations sont de travail comme vous le souhaitez. C'est juste pour le retard, après pageload. De là, il est assez facile de construire sur ce aswell. Comme l'ajout de l'animation lorsque l'utilisateur a fait défiler jusqu'à l'élément, etc. etc.

    Mis à jour pour #cible

    L'animation du champ de saisie était déjà au travail (sans les scripts), avec un retard (voir délai de classe). Le problème est de retarder l'effet de flou à .target.
    Juste mis à jour le code de sorte qu'il ajoute le flou après 1 seconde pour #target. J'ai mal compris cette partie. La solution est la même si.

    OriginalL'auteur Stan Smulders