Die Herstellung eines Bildes / div verblassen mit CSS3, ohne mit einem hover

Ich habe ein div mit einem Bild drin. Im moment verwende ich CSS3-animation verblassen es aus, aber die performance ist schrecklich.

Ich bin ziemlich sicher, dass ich mit sollte-übergänge. Problem ist, ich kann nicht finden, ein Beispiel, das nicht ausgelöst durch einen hover.

Wie kann ich es so machen, dass wenn die Seite geladen wird, wird nach einer Verzögerung von 2 Sekunden, das Bild/div schwindet von 0%?

In dem moment, als ich sagte, mit animation, die ich habe:

@-webkit-keyframes fadetime {
from {
 opacity: 0;
}

50% {
 opacity: 0;
}

to {
 opacity: 1;
    }
}

Irgendwelche Ideen? Danke.

Man könnte ein übergang in eine Klasse, und fügen Sie dann die Klasse mit css nach 2 Sekunden.

InformationsquelleAutor user397466 | 2010-07-21

  1. 12
    @-webkit-keyframes FadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.object {
    -webkit-animation-name: FadeIn;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 3s;
}
    Hallo, ist es einfach diese zu erstellen, eine Bildergalerie, wie würden Sie gehen über das ausblenden der ersten Ebene zu offenbaren, die zweite und dann die zweite Schicht zu offenbaren, die Dritte usw. Dank Gary

    InformationsquelleAutor Michael Martin

  2. 0

    Mithilfe von jQuery, ist wohl der bessere Weg zu gehen:

    <script type="text/javascript">

$(document).ready(function () {
$('#mainContent').hide();
$('#mainContent').delay(2000).fadeIn(500);

});

</script>

    Wobei #mainContent ist das div, die Sie möchten, zu verblassen, in

    Jquery ist VIEL laggier als CSS3-Animationen.
    jQuery ist gut als Ersatz (mit Modernizr zu erkennen CSS-animation-Unterstützung), jedoch CSS3-Animationen sind viel schneller und ist wahrscheinlich der Weg zu gehen in Naher Zukunft

    InformationsquelleAutor Anthony

Schreibe einen Kommentar