KunmingDirk: div verschwinden lassen

SELF-Forum

div verschwinden lassen

KunmingDirk
– Informationen zu den Bewertungsregeln

Hallo,

ist möglich ein Element , nach einiger Zeit, nur optisch verschwinden zu lassen?

ich möchte dies nur mit html und css ereichen.
Ohne javascript oder flash.

Im konkreten Fall geht es um eine div oder ein darin vorhandenes img,
das eine Werbeeinblendung ist.
die Werbung soll nach einiger Zeit verschwinden.
Dadurch soll sich aber der Aufbau der Seite nicht verändern (reservierter Platz bleibt erhalten).

also nach 2 Sekunden soll sich visibility selbstständig (wenn möglich langsam) von visible nach hidden ändern

und so bleiben!

ich habe es mit css3 transition und animation versucht aber nicht geschafft

vielen Dank,
Dirk

PS
Als naechsten Schritt moechte ich den Fall umkehren.
ein element soll langsam hoeher und sichtbarer werden

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. div verschwinden lassen

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Dadurch soll sich aber der Aufbau der Seite nicht verändern (reservierter Platz bleibt erhalten).
    also nach 2 Sekunden soll sich visibility selbstständig (wenn möglich langsam) von visible nach hidden ändern

    statt visibility opacity verwenden?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div verschwinden lassen

      KunmingDirk
      – Informationen zu den Bewertungsregeln

      Hi,

      Dadurch soll sich aber der Aufbau der Seite nicht verändern (reservierter Platz bleibt erhalten).
      also nach 2 Sekunden soll sich visibility selbstständig (wenn möglich langsam) von visible nach hidden ändern

      statt visibility opacity verwenden?

      cu,
      Andreas

      Hi Andreas,

      vielen Dank!
      mit opacity funktioniert es.
      siehe Beispiel weiter unten.

      Ich moechte aber auch noch verstehen warum mein Versuch gescheitert ist.
      Vielleicht kannst Du mir auch dabei helfen.?
      hier mein Fehlversuch:

        
  
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>1-5vanish</title>  
  
<style>  
img#vanishadd  
{  
animation-name: vanishadd;  
animation-duration: 5s;  
animation-delay: 1s;  
  
/* Firefox: */  
-moz-animation-name: vanishadd;  
-moz-animation-duration: 5s;  
-moz-animation-delay: 1s;  
}  
  
@keyframes vanishadd  
{  
from {visibility:visible;}  
to   {visibility:hidden;}  
}  
@-moz-keyframes vanishadd /* Firefox */  
{  
from {transform:rotate(0deg);visibility:visible;opacity:1}  
  to {transform:rotate(-90deg);visibility:hidden;opacity:0}  
}  
</style>  
</head>  
<body>  
<div  style="" >  
<img id="vanishadd" src="./add.jpg" style="float:left" alt=" kenWorth chinese-art-exhibition" >  
<a href="./hidden.html"> <img src="./gb.gif "  alt="close add"> </a>  
</div>  
  
</body>  
</html>

      Die Rotation habe ich nur eingebaut damit  ich sehen kann ob die animation ablaeuft,
      Also wieso wirds nicht invisible und wie kann es invisible bleiben???

      hier wie es funktioniert (habe ich von Sentence in html.de bekommen.)

        
<style>  
.werbung {  
  opacity:0;  
	animation:werbungWeg 6s;  
	}  
  
@keyframes werbungWeg {  
  0%{opacity:1}  
  50%{opacity:1}  
	100%{opacity:0}  
  }  
</style>  
<img src="meinewerbung.jpg" class="werbung">
~~~>  
  
  
  
Danke,  
Dirk
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. div verschwinden lassen

        KunmingDirk
        – Informationen zu den Bewertungsregeln

        Oh!
        Mist!
        "opacity" war noch nicht in meinem Fehlversuch drin.
        Ist irgenwie nach dem Tipp von MudGuard reingeraten.

        Cheers,
        Dirk

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. div verschwinden lassen

        MudGuard Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        Hi,

        Ich moechte aber auch noch verstehen warum mein Versuch gescheitert ist.

        Naja, visibility kennt ja nur zwei Werte (collapse und inherited nützen hier ja nichts) - da gibt's nicht viel zu animieren, weil's keine Zwischenwerte gibt.

        Opacity hat dagegen viele Zwischenwerte zwischen 1 und 0.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

  2. div verschwinden lassen

    KunmingDirk
    – Informationen zu den Bewertungsregeln

    Danke fuer eure Hilfe
    (und sorry fuers spaete Danke)

    Hier die Antwort/Loesung:
    http://forum.de.selfhtml.org/?t=212896&m=1454820:
    "
     visibility kennt ja nur zwei Werte (collapse und inherited nützen hier ja nichts) - da gibt's nicht viel zu animieren, weil's keine Zwischenwerte gibt.

    Opacity hat dagegen viele Zwischenwerte zwischen 1 und 0.

    "

    hier meine Loesung:
    http://icct-china.com/DirkSite/realestate/kenWorthcopyhtml/kenWorthcopyhtml.html

    Cheers,
    Dirk

    Hiermit ist fuer mich das Thema erst mal abgeschlossen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln