Verzögert blur-filter mit der transition in CSS3

Muss ich zuerst tun eine verblasste Unschärfe auf ein element mit einer Verzögerung des übergangs nach dem laden. Zweite weitere element sollte eingeblendet werden. Ich bin mit der Animation.css.

Ich bin mit der Animation.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;
}

Mit dabei, und das verzögerte einblenden der inputField funktioniert Super. Die target bekommt auch unscharf. Aber diese Unschärfe ist nicht animiert und nicht verzögert.

Entweder sind Sie nicht, Sie zeigt uns den vollständigen code, (oder) Ihr Verständnis von übergängen ist falsch. Es ist kein Zustand zu ändern, den übergang zu passieren, auf der target. Animationen auf der anderen Seite brauchen nicht, einen Zustand zu ändern, und automatisch gestartet werden kann.
Ok, Sie haben Recht: Es scheint, dass ich nicht verstehe, übergänge. Also, was muss ich ändern, um es zu tun, in der richtigen Weise? Die animation der input-box funktioniert, so dass ich dachte, dass ich das gleiche tun für die Unschärfe...
So sind Sie auf der Suche für eine animation, die beim laden der Seite, wo das element verwischt nach einer Verzögerung von 1s?
CSS3 ist noch in CSS und es gab keine Notwendigkeit, entfernen Sie den tag.
Ja, richtig. Ich möchte einen verblichenen Unschärfe nach dem pageload mit einer Verzögerung von 1s.

InformationsquelleAutor user3142695 | 2015-09-26

  1. -2

    Da bist du nicht konkret gefragt, für einen CSS/HTML-Lösung, hier ist ein Weg, um zu bekommen, was Sie wollen, indem Sie einige jquery in den mix.

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

    Unnötig zu sagen, stellen Sie sicher, die Animationen sind arbeiten, wie Sie wollen. Dies ist nur für die Verzögerung, nach dem pageload. Von hier aus ist es Recht einfach aufbauen, die aswell. Wie das hinzufügen der animation, wenn der Benutzer einen Bildlauf zu dem element, etc. etc.

    Aktualisiert für #target

    Die animation des input-Feldes war bereits arbeiten (ohne scripts) mit einer Verzögerung (siehe delay-Klasse). Das problem ist die Verzögerung der blur-Effekt zu .target.
    Nur aktualisiert der code, so fügt es die blur nach 1 Sekunde zu #target. Ich missverstanden, Teil. Die Lösung ist dieselbe.

    InformationsquelleAutor Stan Smulders

Schreibe einen Kommentar