Wie blende ich ein DIV ein?

[Thomas811]

Ich habe eine Webseite entdeckt bei der mit der Anfangseffekt gefällt!
https://zahnarzt-ixmann.de
Hier wird nach dem Laden das DIV in dem sich der Foto-Slider befindet eingeblendet, bzw. wird die Höhe verändert.
Ich hab schon verschiedene Lösungsansätze ausprobiert, jedoch komme ich nicht zum gewünschten Erfolg.
Ich wollte das mit CSS realisieren.
Wer kann mir dabei helfen!?

Eine andere Webseite ist http://www.nfzfranken.de hier wird auch ein Einblendeffekt verwendet!

Ich möchte falls es realisierbar ist kein Javascript verwenden.

 

[TPHeinz]

Moin @Thomas811

Zahnarzt css - evtl. mit transition, da mal hier nachsehen:


die zweite Seite ist wohl mit javascript gemacht.

 

[Squeendot]

Hallo Thomas!
Einfach beim CSS des Sliders

transition: all 1s;

hinzufügen, dann wird beim Neu-Laden das Einblenden animiert.
Ansonsten geht das ganze mit jQuery und slideToggle ziemlich simpel.

LG,

Julian

 

[Thomas811]

Ich habs geschafft oben in der CSS Datei ein FADEIN beschrieben

@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fad

Dann den eigentlichen CSS Befehl beim zugehörigen DIV in der CSS Datei,
hier habe ich einen container beschrieben und mit der letzten Zeile animation:fadein den Ablauf der
Animation gestartet.

#container {
margin:1% 1% auto;
width:98%;
border:1px solid black;
background-color:azure;
/* fade in blendet die Seite weich ein */
animation:fadein 1.0s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 1.0s;


Viel Spaß beim Nachbauen

 

[Myhar]

Wozu werden -moz-animation und -webkit-animation noch gebraucht? Auch sollten Vendor-Prefixes immer zuerst stehen und der Standardbefehl zuletzt. Sollten diese Befehle also wirklich benötigt werden, dann wäre folgendes korrekt:

-moz-animation:fadein 1.0s;
-webkit-animation:fadein 1.0s;
animation:fadein 1.0s;

 

[Thomas811]

Hier eine Übersicht über die Herstellerpräfixe:

• -webkit- (Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)
• -moz- (Firefox)
• -o- (Alte Versionen von Opera aus der Zeit vor WebKit)
• -ms- (Internet Explorer und Microsoft Edge)

 

[Myhar]

Danke für die Übersicht, das ist mir durchaus bewusst. Aber falls das als Antwort auf meine Frage gedacht war: Das hat leider nicht viel damit zu tun.
Diese präfixe werden für (noch) experimentelle Features benutzt, deshalb soll auch der Standardwert immer als letztes ausgegeben werden. Damit, falls ein Standardwert implementiert wird, dieser dann auch überall korrekt verwendet wird. (Siehe mein voriges Posting)
Auch ist es im Falle von animation nicht mehr notwendig Präfixe zu verwenden da alle Browser die Animationen bereits ohne diese unterstützen. Siehe auch. http://caniuse.com/#feat=css-animation

 

[Thomas811]

Vielen Dank für die Information. Den Befehl für die Animation hab ich mir von einer Webseite die sich mit CSS beschäftigt geholt und eingefügt. Da ich in der Vergangenheit des öfteren darüber gestolpert bin, dass verschiedene Befehle von manchen Browsern nicht unterstützt wurden, oder diese eine "Sondereinladung" benötigt haben, entschied ich mich den Code unverändert zu übernehmen und nur die Werte anzupassen. Danke für deinen Link, fand ich sehr hilfreich.