Ich versuche, CSS-Filter zu animieren, kann aber keine Informationen zu den richtigen Übergangseigenschaften finden. Was sind Sie?Gibt es eine animierbare Übergangseigenschaft für CSS-Filter?
Hier ist ein Beispiel: http://jsbin.com/onijim/3/
-webkit-transition : -webkit-filter 500ms linear
Werke in WebKit. Ich kenne keine Filterunterstützung in FF oder Opera.
Ich bin mir nicht sicher, ob ich Ihre Frage vollständig verstehe.
Sie haben es richtig verstanden. Anscheinend funktioniert die Übergangseigenschaft nur mit Präfixen, zum jetzigen Zeitpunkt, danke. – donleche
Wenn ich den Übergang -webkit-filter, animiert es gut, aber nach der Animation der DIV erscheint leer. Ich verwende nur eine Unschärfe von 5px auf das Div. –
Anscheinend bekomme ich einen Rendering-Glitch, weil er nur bricht, wenn das div mit dem Blur div eine linke Position hat, die umgestellt wird, aber wenn die linke 0px ist, verschwindet das blur div nicht mehr (oder wenn ich es verwische, dann ändern die linke Position des Containers zeigt es immer noch). Wünschte, sie würden diese Knicke ausarbeiten! –
Das ist, was ich benutze. Für Mozilla funktioniert das 2. für mich, aber in meinen Quellen habe ich es mit dem -moz-Präfix gefunden, also tut es nicht weh, beides zu behalten.
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
Da @AxeEffect in seinem Kommentar erwähnt wurde, sollten Sie für die neueste Chrome-Unterstützung die '-webkit-filter' -Eigenschaft zum nicht vordefinierten 'Übergang' hinzufügen, wie' transition: 1s filter linear, 1s -webkit-filter linear; ' –
Auf den letzten Versionen von Chrome, die transition ohne -webkit- Präfix unterstützen, wenn Sie mit transition-property (keine Stenografie transition) und Eigenschaften wie filter die -webkit- Präfix müssen Sie muss noch ohne Präfix mischen und Präfix-Code:
transition-property: width, left, transform, box-shadow, filter, -webkit-filter;
Beachten Sie, dass die filter Eigenschaft mit -webkit-filter wiederholt wird. Dies wird für Browser benötigt, die keine Präfixe wie Firefox verwenden. In diesem Fall wird -webkit-filter ignoriert.
Es sollte der gleiche Eigenschaftsname sein, nein? Stellen Sie sicher, dass Sie die Präfixe auch richtig zuordnen. – BoltClock