KunmingDirk: div verschwinden lassen

Beitrag lesen

SELF-Forum

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