nicht angemeldet
Suche eine Animation, die sich wie eine Transition verhält...
0 
henman
Suche eine Animation, die sich wie eine Transition verhält...
Hallo,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
.myMarquee {
width: 600px;
height: 40px;
overflow: hidden;
position: relative;
border: 1px solid #aaa;
margin:0 auto;
}
.scroller {
display:block;
width:1300px;
height:40px;
position:absolute;
left:0;
top:0;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-moz-animation-duration:2s;
-moz-animation-name: scroll;
}
.scroller IMG {
float:left;
width:600px;
white-space: pre;
}
@-moz-keyframes scroll {
from {left:0;}
to {left:-620px;}
}
</style>
</head>
<body>
<div class="myMarquee">
<div class="scroller">
<img class="innerimg" src="headimg_01_b.jpg"/><img class="innerimg" src="headimg_02_b.jpg"/>
</div>
</div>
<br/><br/>
</body>
</html>
Das Tole an der Animation ist ja, dass sie sofort losläuft, das blöde (in meinem Fall), dass sie wieder in den Ausgangszustand "zurückspringt". Es soll einfach von headimg_01_b.jpg nach headimg_02_b.jpg gescrollt werden und danach headimg_02_b.jpg angezeigt bleiben.
Kann man da irgendwie "tricksen"? Mit -keyframes eine Transition auslösen?
Danke für eure Ideen!
Siri
-
servus Siri,
Kann man da irgendwie "tricksen"? Mit -keyframes eine Transition auslösen?
Nicht wirklich.
Es gibt die experimentelle animation-fill-mode-Eigenschaft, mit der der Endzustand einer Animation beibehalten werden kann.
Die Browser-Kompatibilität lässt aber noch zu wünschen übrig.Da wirste um Javascript wohl nicht herumkommen.
henman
--
"Sir, we are surrounded!" - "Excellent, we can attack in any direction!"-
Hallo,
Es gibt die experimentelle animation-fill-mode-Eigenschaft, mit der der Endzustand einer Animation beibehalten werden kann.
Genau das habe ich gesucht! Danke!
Viele Grüße
Siri
-