Ist es möglich, CSS3-Übergangsanimationen beim Laden von Seiten ohne Javascript zu verwenden?
Dies ist eine Art von dem, was ich will, aber beim Laden der Seite:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
Was ich bisher gefunden habe
- CSS3-Übergangsverzögerung , eine Möglichkeit, Auswirkungen auf Elemente zu verzögern. Funktioniert nur beim Schweben.
- CSS3 Keyframe , arbeitet unter Last, ist aber extrem langsam. Aus diesem Grund nicht nützlich.
- Der CSS3-Übergang ist schnell genug, wird jedoch beim Laden der Seite nicht animiert.
css
webkit
css-transitions
css-animations
Jens Törnell
quelle
quelle
Antworten:
Sie können eine CSS- Animation beim Laden der Seite ausführen, ohne JavaScript zu verwenden. Sie müssen nur CSS3-Keyframes verwenden .
Schauen wir uns ein Beispiel an ...
Hier ist eine Demonstration eines Navigationsmenüs, das nur mit CSS3 eingerichtet wird :
Mach es kaputt ...
Die wichtigen Teile hier sind die Keyframe-Animation, die wir
slideInFromLeft
...... was im Grunde sagt "am Anfang wird der Header um seine volle Breite vom linken Bildschirmrand entfernt sein und am Ende wird er an Ort und Stelle sein".
Der zweite Teil nennt diese
slideInFromLeft
Animation:Oben ist die Kurzversion, aber hier ist die ausführliche Version zur Klarheit:
Sie können alle möglichen interessanten Dinge tun, z. B. Inhalte verschieben oder auf Bereiche aufmerksam machen.
Hier ist, was W3C zu sagen hat.
quelle
Es ist sehr wenig Javascript erforderlich:
Nun das CSS:
Ich weiß, dass die Frage "ohne Javascript" lautete, aber ich denke, es ist erwähnenswert, dass es eine einfache Lösung gibt, die eine Zeile Javascript umfasst.
Es könnte sogar Inline-Javascript sein, so etwas:
Das ist alles JavaScript, das benötigt wird.
quelle
body
Klassen zu vermeiden, verwenden Sie:document.body.classList.add('loaded)
document.body.className += " loaded";
es etwas weniger ausführlich , dieloaded
Klasse zu vorhandenen Klassen hinzuzufügen .Ich glaube, ich habe eine Art Problemumgehung für die OP-Frage gefunden - anstelle eines Übergangs, der mit 'on.load' der Seite beginnt - habe ich festgestellt, dass die Verwendung einer Animation für das Einblenden der Deckkraft den gleichen Effekt hat (nach dem ich gesucht habe) das gleiche wie OP).
Daher wollte ich, dass der Textkörper beim Laden der Seite von Weiß (wie der Hintergrund der Website) in die Farbe Schwarzes Schwarz eingeblendet wird - und ich habe erst seit Montag codiert, also suchte ich nach einem Code im Stil "on.load". Aber ich kenne JS noch nicht - hier ist mein Code, der für mich gut funktioniert hat.
Und aus irgendeinem Grund funktioniert dies nicht
.class
nur für#id
(zumindest nicht für meine)Hoffe das hilft - wie ich weiß, hilft mir diese Seite sehr!
quelle
Nun, das ist eine schwierige Frage.
Die Antwort lautet "nicht wirklich".
CSS ist keine funktionale Ebene. Es ist nicht bekannt, was wann passiert. Es wird einfach verwendet, um eine Präsentation hinzuzufügen verschiedenen "Flags" (Klassen, IDs, Status) .
Standardmäßig bietet CSS / DOM keinen "On Load" -Status für CSS. Wenn Sie JavaScript verwenden möchten / könnten, würden Sie eine Klasse
body
oder etwas zuweisen , um CSS zu aktivieren.Davon abgesehen können Sie einen Hack dafür erstellen. Ich werde hier ein Beispiel geben, aber es kann auf Ihre Situation zutreffen oder nicht.
Wir gehen davon aus, dass "Schließen" "gut genug" ist:
Hier ist ein Auszug aus unserem CSS-Stylesheet:
Wir gehen auch davon aus, dass moderne Browser progressiv gerendert werden, sodass unser letztes Element zuletzt gerendert wird und dieses CSS zuletzt aktiviert wird.
quelle
Ähnlich wie bei @ Rolf, aber überspringen Sie den Verweis auf externe Funktionen oder spielen Sie mit der Klasse. Wenn die Deckkraft nach dem Laden auf 1 festgelegt werden soll, verwenden Sie einfach das Inline-Skript, um die Deckkraft direkt über den Stil zu ändern. Beispielsweise
Dabei wird das CSS-System "Fadein" pro @ Rolf definiert, wobei der Übergang definiert und die Deckkraft auf den Anfangszustand gesetzt wird (dh 0).
Der einzige Haken ist, dass dies nicht mit SPAN- oder DIV-Elementen funktioniert, da sie kein funktionierendes Onload-Ereignis haben
quelle
Starten Sie es mit einem Schwebeflug des Körpers als Es wird gestartet, wenn sich die Maus zum ersten Mal auf dem Bildschirm bewegt, was meist innerhalb einer Sekunde nach der Ankunft der Fall ist. Das Problem hierbei ist, dass es sich umkehrt, wenn es sich außerhalb des Bildschirms befindet.
Das ist das Beste, was ich mir vorstellen kann: http://jsfiddle.net/faVLX/
Vollbild: http://jsfiddle.net/faVLX/embedded/result/
Bearbeiten siehe Kommentare unten:
Dies funktioniert auf keinem Touchscreen-Gerät, da kein Hover vorhanden ist, sodass der Benutzer den Inhalt nur sehen kann, wenn er darauf tippt. - Rich Bradshaw
quelle
CSS nur mit einer Verzögerung von 3s
Ein paar Punkte, die Sie hier beachten sollten:
Code:
quelle
Ok, ich habe es geschafft, eine Animation zu erzielen, wenn die Seite nur mit CSS-Übergängen geladen wird (irgendwie!):
Ich habe 2 CSS-Stylesheets erstellt: Das erste ist, wie das HTML vor der Animation gestaltet werden soll ... und das zweite ist, wie die Seite aussehen soll, nachdem die Animation ausgeführt wurde.
Ich verstehe nicht ganz, wie ich das erreicht habe, aber es funktioniert nur, wenn die beiden CSS-Dateien (beide im Kopf meines Dokuments) wie folgt durch Javascript getrennt sind.
Ich habe dies mit Firefox, Safari und Oper getestet. Manchmal funktioniert die Animation, manchmal springt sie direkt zur zweiten CSS-Datei und manchmal scheint die Seite geladen zu werden, aber es wird nichts angezeigt (vielleicht bin es nur ich?)
Hier ist ein Link zu meiner Work-in-Progress-Website: http://www.hankins-design.co.uk/beta2/test/index.html
Vielleicht irre ich mich, aber ich dachte, Browser, die keine CSS-Übergänge unterstützen, sollten keine Probleme haben, da sie ohne Verzögerung oder Dauer direkt zur zweiten CSS-Datei springen sollten.
Ich bin daran interessiert zu sehen, wie suchmaschinenfreundlich diese Methode ist. Mit meinem schwarzen Hut könnte ich vermutlich eine Seite mit Schlüsselwörtern füllen und die Deckkraft um 9999 Sekunden verzögern.
Mich würde interessieren, wie Suchmaschinen mit dem Attribut "Übergangsverzögerung" umgehen und ob sie mit der oben beschriebenen Methode überhaupt die Links und Informationen auf der Seite sehen würden.
Noch wichtiger ist, ich würde wirklich gerne wissen, warum dies nicht jedes Mal konsistent ist, wenn die Seite geladen wird, und wie ich dies korrigieren kann!
Ich hoffe, dass dies einige Ansichten und Meinungen erzeugen kann, wenn nichts anderes!
quelle
Wenn jemand andere Probleme hatte, zwei Übergänge gleichzeitig durchzuführen, habe ich Folgendes getan. Ich brauchte Text, um beim Laden der Seite von oben nach unten zu kommen.
HTML
HTML
CSS
Ich weiß nicht, warum ich immer wieder versucht habe, 2 Übergangsdeklarationen in einem Selektor zu verwenden, und (nicht wirklich) dachte, dass beide verwendet werden würden.
quelle
Noch einfachere Lösung (immer noch mit [einzeiliger Inline] Javascript):
Verwenden Sie dies als der Body - Tag: Beachten Sie, dass
body.
oderthis.
nicht für mich arbeiten. Nur die langen;querySelector
erlauben die Verwendung vonclassList.remove
(Linux Chromium)und fügen Sie diese Zeile zusätzlich zu Ihren anderen CSS-Regeln hinzu.
Beachten Sie, dass dies für die Deckkraft gelten kann (wie von OP [anderen Postern] gefordert), indem Sie stattdessen die Deckkraft als Übergangsauslöser verwenden. (Funktioniert möglicherweise sogar mit anderen CSS-Regeln auf dieselbe Weise, und Sie können mehrere Klassen für die explizite Verzögerung zwischen dem Auslösen verwenden.)
Die Logik ist dieselbe. Keine Transformation erzwingen (mit
:none !important
allen untergeordneten Elementen vonbody.onload
und nach dem Laden des Dokuments entfernen Sie die Klasse, um alle Übergänge für alle Elemente auszulösen, wie in Ihrem CSS angegeben.ERSTE ANTWORT UNTEN (SIEHE BEARBEITEN OBEN FÜR KURZE ANTWORT)
Hier ist eine umgekehrte Lösung:
Funktioniert mit mehreren Übergängen für mehrere Elemente. Ich habe keine Cross-Browser-Kompatibilität versucht.
quelle
Nicht wirklich, da CSS so schnell wie möglich angewendet wird, aber die Elemente möglicherweise noch nicht gezeichnet wurden. Sie könnten eine Verzögerung von 1 oder 2 Sekunden erraten, aber dies sieht für die meisten Menschen nicht richtig aus, abhängig von der Geschwindigkeit ihres Internets.
Wenn Sie beispielsweise etwas einblenden möchten, ist CSS erforderlich, das den zu liefernden Inhalt verbirgt. Wenn der Benutzer keine CSS3-Übergänge hat, wird er diese nie sehen.
Ich würde empfehlen, jQuery (aus Gründen der Benutzerfreundlichkeit + Sie möchten möglicherweise Animationen für andere UAs hinzufügen) und einige JS wie diese zu verwenden:
Zusammen mit den im CSS hinzugefügten Übergängen. Dies hat den Vorteil, dass bei Bedarf problemlos die Verwendung von Animationen anstelle des zweiten CSS in älteren Browsern möglich ist.
quelle
#id_to_fade in
, obwohl ich damit einverstanden bin, was aus der Antwort nicht so klar hervorgeht.#id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }
+-o-
auch-moz-
Präfixe.