css3 transition animation beim laden?

StackOverflow https://stackoverflow.com/questions/6805482

Frage

Ist es möglich mit CSS3 transition-animation auf Seite laden, 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

  • CSS3 transition-delay, ein Weg, um die Verzögerung Effekte auf die Elemente.Funktioniert nur auf hover.
  • CSS3-Keyframe, funktioniert auf laden, sind aber extrem langsam.Nicht sinnvoll, weil die.
  • CSS3 transition ist schnell genug, aber nicht animieren, auf Seite laden.
War es hilfreich?

Lösung

Du kann lauf a CSS Animation auf Seite geladen, ohne JavaScript zu verwenden; Sie müssen nur verwenden CSS3 Keyframes.

Schauen wir uns ein Beispiel an ...

Hier ist eine Demonstration eines Navigationsmenüs, das mit dem Einsetzen der Verwendung CSS3 nur:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Brechen Sie es auf ...

Die wichtigen Teile hier sind die Keyframe -Animation, die wir nennen slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

... was im Grunde genommen sagt: "Am Start wird der Header durch seine volle Breite von der linken Rande des Bildschirms sein und am Ende vorhanden sein."

Der zweite Teil nennt das slideInFromLeft Animation:

animation: 1s ease-out 0s 1 slideInFromLeft;

Oben ist die Kurzversion, aber hier ist die ausführliche Version für Klarheit:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

Sie können alle möglichen interessanten Dinge tun, wie in Inhalt zu rutschen oder auf Bereiche aufmerksam zu machen.

Hier ist, was W3C zu sagen hat.

Andere Tipps

Sehr wenig JavaScript ist notwendig:

window.onload = function() {
    document.body.className += " loaded";
}

Jetzt das CSS:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

Ich kenne die Frage "ohne JavaScript", aber ich denke, es lohnt sich darauf zu zeigen, dass es eine einfache Lösung gibt, die eine JavaScript -Zeile betrifft.

Es könnte sogar ein Inline -JavaScript sein, so ähnlich:

<body onload="document.body.className += ' loaded';" class="fadein">

Das ist alles, was JavaScript benötigt, das benötigt wird.

Ich glaube, ich habe gefunden, eine Art Arbeit, um für die OP in Frage - statt eines übergangs Anfang 'auf.laden der Seite - ich fand eine animation für eine Deckkraft verblassen in den gleichen Effekt hatte, (ich war auf der Suche nach der gleichen Sache als OP).

Also ich wollte den text fade in weiß(gleiche wie Website-hintergrund), um schwarze text-Farbe beim laden der Seite - und ich habe nur die Codierung seit Montag, also war ich auf der Suche für ein 'auf.laden Stil, was code, aber nicht wissen, JS-noch - also hier ist mein code, der gut funktioniert für mich. 

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

Und für was auch immer Grund, das nicht funktioniert .class nur #id's(zumindest nicht von mir)

Hoffe, das hilft - so wie ich Sie kenne diese Seite hilft mir sehr!

Nun, das ist schwierig.

Die Antwort lautet "nicht wirklich".

CSS ist keine funktionale Schicht. Es hat kein Bewusstsein dafür, was passiert oder wann. Es wird einfach verwendet, um a hinzuzufügen Präsentation Ebene zu verschiedenen "Flags" (Klassen, IDs, Zustände).

Standardmäßig liefert CSS/DOM keine Art von "On -Last" -Zustand für die Verwendung von CSS. Wenn Sie JavaScript verwenden möchten/könnten, würden Sie eine Klasse zuweisen body oder etwas, um einige CSS zu aktivieren.

Davon abgesehen können Sie dafür einen Hack erstellen. Ich werde hier ein Beispiel geben, aber es kann für Ihre Situation anwendbar sein oder nicht.

Wir arbeiten davon, dass "nah" "gut genug" ist:

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

Hier ist ein Auszug unseres CSS -Stylesheet:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

Wir gehen auch davon aus, dass moderne Browser progressiv rendern, sodass unser letztes Element zuletzt sein wird, und so wird dieses CSS zuletzt aktiviert.

Ähnlich wie bei der Lösung von @rolf, aber überspringen Sie den Verweis auf externe Funktionen oder das Spielen mit dem Unterricht. Wenn die Opazität nach dem Laden auf 1 behoben bleibt, verwenden Sie einfach das Inline -Skript, um die Opazität direkt über den Stil zu ändern. Zum Beispiel

<body class="fadein" onload="this.style.opacity=1">

Wo CSS Sytle "Fadein" pro @rolf definiert ist, definiert der Übergang und setzt die Deckkraft in den Anfangszustand (dh 0)

Der einzige Haken ist, dass dies nicht mit Spannweite oder Divelelementen funktioniert, da sie keine funktionierende Onload -Veranstaltung haben

Starten Sie es mit dem Körperbetrieb, als es beginnt, wenn sich die Maus zum ersten Mal auf den Bildschirm bewegt. Dies ist hauptsächlich innerhalb einer Sekunde nach der Ankunft. Das Problem hier ist, dass es sich beim Ausflug aus dem Bildschirm umgeht.

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

Das ist das Beste, was ich mir vorstellen kann: http://jsfiddle.net/favlx/

ganzer Bildschirm: http://jsfiddle.net/favlx/embeded/result/

Bearbeiten Siehe Kommentare unten:
Dies funktioniert nicht auf einem Touchscreen -Gerät, da es keinen Schwebewechsel gibt, sodass der Benutzer den Inhalt nicht sieht, es sei denn, er tippt darauf. - Rich Bradshaw

Ok, ich habe es geschafft, eine Animation zu erreichen, wenn die Seite nur mit CSS -Übergängen (irgendwie!) Geladen wird:

Ich habe 2 CSS -Style -Blätter erstellt: Das erste ist, wie ich vor der Animation den HTML -Stil gestaltet habe ... und das zweite ist, wie ich möchte, dass die Seite die Animation betreut wurde.

Ich verstehe nicht vollständig, wie ich dies erreicht habe, aber es funktioniert nur, wenn die beiden CSS -Dateien (beide im Kopf meines Dokuments) wie folgt von einem JavaScript getrennt werden.

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 zu geladen, aber nichts wird angezeigt (vielleicht bin es nur ich?)

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

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 CSS -Übergänge nicht unterstützen, sollten keine Probleme haben, da sie ohne Verzögerung oder Dauer direkt zur zweiten CSS -Datei überspringen sollten.

Ich bin interessiert zu wissen, wie Suchmaschinenfreundlichkeit diese Methode ist. Ich nehme an, ich könnte eine Seite mit Schlüsselwörtern füllen und eine Verzögerung von 9999 auf ihre Deckkraft anwenden.

Ich würde interessiert zu wissen, wie Suchmaschinen mit dem Übergangs-Delay-Attribut umgehen und ob sie mithilfe der oben genannten Methode sogar die Links und Informationen auf der Seite sehen würden.

Noch wichtiger ist, dass ich wirklich gerne wissen möchte, warum dies nicht jedes Mal konsistent ist, wenn die Seite geladen wird und wie ich dies korrigieren kann!

Ich hoffe, dies kann einige Ansichten und Meinungen generieren, wenn nichts anderes!

Wenn jemand anderes Probleme hatte, zwei Übergänge gleichzeitig durchzuführen, habe ich Folgendes getan. Ich brauchte Text, um von oben nach unten auf der Seite des Seitens zu kommen.

Html

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

Html

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

Ich weiß nicht, warum ich immer wieder versucht habe, 2 Übergangserklärungen in 1 Selektor zu verwenden und (nicht wirklich) zu denken, dass es beide verwenden würde.

CSS nur mit einer Verzögerung von 3s

Ein paar Punkte hier:

  • Mehrere Animationen in einem Anruf
  • Wir schaffen a Warten Animation, die nur das tatsächliche verzögert (die zweite in unserem Fall).

Code:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Nicht wirklich, da CSS so schnell wie möglich angewendet wird, aber die Elemente sind möglicherweise noch nicht gezeichnet. Sie könnten eine Verzögerung von 1 oder 2 Sekunden erraten, aber dies wird für die meisten Menschen nicht richtig aussehen, abhängig von der Geschwindigkeit ihres Internets.

Wenn Sie beispielsweise etwas verblassen möchten, müssen CSS, das den Inhalt versteckt, außerdem erforderlich ist, um geliefert zu werden. Wenn der Benutzer keine CSS3 -Übergänge hat, würde er es nie sehen.

Ich würde empfehlen, JQuery zu verwenden (für die Benutzerfreundlichkeit + möchten Sie möglicherweise Animation für andere UAS hinzufügen) und einige JS wie folgt: 

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

Zusammen mit den im CSS hinzugefügten Übergängen. Dies hat den Vorteil, dass es bei Bedarf leicht die Verwendung von Animate anstelle des zweiten CSS in Legacy -Browsern zulässt.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top