• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] div verschwinden lassen

K

KunmingDirk

Neues Mitglied
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 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 versuch aber nicht geschafft


vielen Dank,
Dirk

PS
Als naechsten Schritt moechte ich den Fall umkehren.
ein element soll langsam hoeher und sichtbarer werden
 
Werbung:
Moin,
transitions und animation ist schon das richtige.
So vielleicht?
HTML: 
<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">
Dei ganze Animation dauert so 6 sekunden, wobei beim start (0%) das Bild 100% sichtbar sein soll, genauso nach der hälfte (50%)der Animationszeit, danach soll das Bild innerhalb von 3 sekunden unsichtbar werden.
An der Zeit und den keyframes kannst du natürlich nach belieben was ändern.
MfG
 
Moin moin Sentence,

Super ! vielen Dank so funktionierts.

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

Vielleicht kannst Du mir auch dabei helfen.?
(Ich muss und werde noch ein paar tutorials durcharbeiten)

hier mein Fehlversuch:
Code: 
<!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;}
  to {transform:rotate(-90deg);visibility:hidden;}
}
</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 ueberhaupt eine animation ablaeuft,
Also wieso wirds nicht invisible und wie kann es invisible bleiben???

Ich bin gerade dabei mir den css teil von W3Schools Online Web Tutorials anzusehen und langsam daemmerts.
Aber nur langsam.

Nochmals vielen Dank,
Dirk
 
Werbung:
Moin Dirk,
ich bin in den transitions auch noch nicht 100% firm ;-)
Aber du kannst nicht von visible nach hidden transformieren dazwischen gibt es nämlich nichts. Deswegen musst du das mit der durchsichtigkeit machen (opacity).
Invisible, oder besser durchsichtig kann es nur bleiben, wenn es vor der transition schon durchsichtig war.

MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben