Verschiedene css3 transition time für "in" und "zurück" - Zustand

Ich versuche, Benutzer css3 übergänge, verblassen die Deckkraft eines Elements (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp).

Habe ich zum Beispiel sagen:

-webkit-transition: opacity 2s ease-in-out;

Gibt es einen Weg zu geben eine andere "Rückkehr zum ursprünglichen Zustand", als die 2s?

Möchte ich niedrig Sie die Deckkraft in 2 Sekunden, aber bringen es zurück bis in 0,5 Sekunden.

CSS3 Transition: Verschiedene übergänge für *IN* und *OUT* (oder der Rückkehr von der transition state) scheint um dies zu erreichen, aber die Verwendung von mehreren Elementen. Eine bessere Möglichkeit?

InformationsquelleAutor Garen Checkley | 2012-07-10
  1. 15

    Ja, es gibt einen besseren Weg - http://jsfiddle.net/bJKpu/

    Geben Sie einfach anders transition-duration-s für normale und hovered: 

    div {
    height: 200px;
    width: 200px;
    background: orange;
    opacity: .5;
    -webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
}


div:hover {
    opacity: 1;
    height: 300px;
    width: 300px;
    -webkit-transition: all 2s ease-in-out;
       -moz-transition: all 2s ease-in-out;
}
    • Vielen Dank für diese. Da bin ich nicht wirklich mit der Maus Befehle, ich bin tatsächlich ändert der übergang CSS mit jQuery bei der Ausgabe des Befehls, der dauert-es-oder gibt-es-aus dem veränderten Zustand.
    • warum müssen Sie die jquery-wenn es funktioniert genauso gut ohne Sie? einige Leute javascript deaktiviert haben, aber Sie können nicht deaktivieren CSS 🙂
    • nur mit jquery-b/c einfacher und ich Baue ein js-schwere webapp... plain javascript würde genauso gut funktionieren.
    • Absolute Helden, ich wünschte, ich könnte +10 🙂
    • x2 - funktioniert wie ein Traum. Ich musste ein wenig Experimentieren und wechseln mein hover und nicht-hover-übergänge um, aber es funktioniert gut. Danke 🙂 (Das sollte so markiert werden, dass die richtige Antwort)
    InformationsquelleAutor Zoltan Toth
Schreibe einen Kommentar