nach jedem bild eine pause

TigerCrow · #1 (**permalink**) 06.05.2014, 09:26

Hallo zusammen

habe mal wieder eine Frage: Möche in CSS nach jedem Bild ( <li> element ) eine kurze pause z.b. 3s , aber irgendwie bekomme das nicht hin

hier mal mein Script:

HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Bildgalerie V2</title>
<style>

body {
	background-color: #CCC;
	margin: 0px;
	padding: 0px;
}

.black {
	background-color: #333;
}

#rahmen {
	margin: 20px auto;
	position: relative;
	width: 600px;
	height: 340px;
	background-color: #333;
	color: #CCC;
	border-radius: 14px;
	box-shadow: 4px 4px 10px rgba(0,0,0,.8);
}

#rahmen_innen {
	position:relative;
	top: 20px;
	left: 20px;
	width: 560px;
	height: 260px;
	border-radius: 14px;
	box-shadow: inset 0px 0px 14px rgba(0,0,0,.8);
	overflow: hidden;
}

@keyframes lauf2 {
	from {left: 0px; }
	to { left: -1800px; }
	
}

#rahmen_innen ul {
	position: relative;
	top: -40px;
	left: -20px;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 2400px;
}

#rahmen ul li {
	position:relative;
	float: left;
	animation: lauf2 20s linear infinite;
}


</style>
</head>

<body>

<div id="rahmen">
	<div id="rahmen_innen">
    	<ul>
        	<li><img src="img/img01.jpg"></li>
            <li><img src="img/img02.jpg"></li>
            <li><img src="img/img08.jpg"></li>
            <li><img src="img/img01.jpg"></li>
        </ul>
    
    </div>

</div>


</body>
</html>

hoffe das mir eventuell jemand helfen kann ...
möchte kein JS einsetzen ..

gruß
TigerCrow

explanator · #2 (**permalink**) 06.05.2014, 13:24

Du musst die Keyframes anpassen, in % des gesamten Zeitraumes.
Ausserdem braucht Webkit(Chrome und neuer Safari) noch den Browserprafix.

So müsste es passen, nur der relevante Teil des CSS, die Änderungen betreffend:

HTML-Code:

@-webkit-keyframes lauf2 {
0% {left: 0px; }
    0% {left: 0px; }
    20% {left: 0px; }
    25% {left: -600px; }
    45% {left: -600px; }
    50% {left: -1200px; }
    70% {left: -1200px; }
    75% {left: -1800px; }
    95% {left: -1800px; } 
    100% {left: 0px; }
	
}
@keyframes lauf2 {
	0% {left: 0px; }
    20% {left: 0px; }
    25% {left: -600px; }
    45% {left: -600px; }
    50% {left: -1200px; }
    70% {left: -1200px; }
    75% {left: -1800px; }
    95% {left: -1800px; } 
    100% {left: 0px; }
}

#rahmen ul li {
	position:relative;
	float: left;
    -webkit-animation: lauf2 20s linear infinite; 
	animation: lauf2 20s linear infinite;
}

Mir scheint die Zeit von 20 Sekunden etwas zu kurz, ich würde da einen längeren Zeitraum wählen. Drei Sekunden pro Bild sind zu kurz, versuch mal 40 Sekunden und zeige es auch anderen, was die davon halten.

TigerCrow · #3 (**permalink**) 06.05.2014, 16:05

achso muss ich das machen .... werde ich später ausprobieren und bescheid geben

den präfix hatte ich noch nicht eingesetzt ... wegen dem testen

danke erst einmal

gruß
TigerCrow

TigerCrow · #4 (**permalink**) 08.05.2014, 07:00

So jetzt hier mal das fertige Ding

falls es jemand haben möchte.

Danke nochmal für die Info ... hätte man auch selber drauf kommen können

Habe es mal auf 40s gesetzt und denke das is ok

HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Bildgalerie V2</title>
<style>
body {
	background-color: #CCC;
	margin: 0px;
	padding: 0px;
}


#rahmen {
	margin: 20px auto;
	position: relative;
	width: 600px;
	height: 340px;
	background-color: #333;
	color: #CCC;
	border-radius: 14px;
	box-shadow: 4px 4px 10px rgba(0,0,0,.8);
}

#rahmen #bildrahmen {
	position: relative;
	top: 20px;
	left: 20px;
	width: 560px;
	height: 260px;
	border-radius: 20px;
	overflow: hidden;
}

#rahmen #schatten {
	position: relative;
	top: -240px;
	left: 20px;
	width: 560px;
	height: 260px;
	border-radius: 14px;
	box-shadow: inset 0px 0px 10px rgba(50,50,50,.9);
}


#rahmen #bildrahmen ul {
	position: absolute;
	top: -40px;
	left: -40px;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 3600px;

}

#rahmen #kugeln {
	position: relative;
	width: 60px;
	top: -220px;
	left: 280px;
}

#rahmen #kugeln ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#rahmen #kugeln ul li {
	float: left;
	padding-left: 5px;
	color: #555;
}

#rahmen #bildrahmen ul li {
	position: relative;
	float: left;
	animation: lauf 40s linear infinite;
}


#rahmen #kugeln .k1 {
	animation: lauf2 40s linear infinite;
}
 
#rahmen #kugeln .k2 {
	animation: lauf3 40s linear infinite;
}

#rahmen #kugeln .k3 {
	animation: lauf4 40s linear infinite;
}

#rahmen #kugeln .k4 {
	animation: lauf5 40s linear infinite;
}

#rahmen #kugeln .k5 {
	animation: lauf6 40s linear infinite;
}


@keyframes lauf {
	0% {left: 0px; }
    13% {left: 0px; }
    19% {left: -600px; }
    34% {left: -600px; }
    38% {left: -1200px; }
    52% {left: -1200px; }
    57% {left: -1800px; }
    72% {left: -1800px; } 
	76% {left: -2400px; }
    91% {left: -2400px; }
    96% {left: -3000px; }
    100% {left: -3000px; }
}


@keyframes lauf2 {
	 0% {color: #ddd; }
	 18% {color: #ddd; }
	 19% {color: #555; }
	 100% { color: #555; }
}

@keyframes lauf3 {
	 0% {color: #555; }
	 18% {color: #555; }
	 19% {color: #ddd; }
	 37% {color: #ddd; }
	 38% {color: #555; }
	 100% { color: #555; }
}

@keyframes lauf4 {
	 0% {color: #555; }
	 38% {color: #555; }
	 39% {color: #ddd; }
	 55% {color: #ddd; }
	 56% {color: #555; }
	 100% { color: #555; }
}

@keyframes lauf5 {
	 0% {color: #555; }
	 56% {color: #555; }
	 57% {color: #ddd; }
	 75% {color: #ddd; }
	 76% {color: #555; }
	 100% { color: #555; }
}

@keyframes lauf6 {
	 0% {color: #555; }
	 76% {color: #555; }
	 77% {color: #ddd; }
	 95% {color: #ddd; }
	 96% {color: #555; }
	 100% { color: #555; }
}


</style>
</head>

<body>

<div id="rahmen">
 
    	<div id="bildrahmen">
		  <ul>
            <li><img src="img/img01.jpg"></li>
            <li><img src="img/img02.jpg"></li>
            <li><img src="img/img08.jpg"></li>
            <li><img src="img/takeoff.jpg"></li>
            <li><img src="img/img-06.jpg"></li>
            <!-- letztes Bild = erstes Bild, dadurch sieht es aus als ob es duchlaufend wäre -->
            <li><img src="img/img01.jpg"></li>
          </ul>
      	</div>
        
        <div id="schatten"></div>
        
        <div id="kugeln">
        	<ul>
            	<li class="k1">•</li>
                <li class="k2">•</li>
                <li class="k3">•</li>
                <li class="k4">•</li>
                <li class="k5">•</li>
            </ul>
        </div>

</div>


</body>
</html>

Die Präfixes für Safari und Co müssen natürlich noch hinzugefügt werden, habe dies hier nicht gemacht da das script sonst zu lang wäre.

Danke nochmals

und wer was zu verbessern hat ... immer her damit

Gruß
TigerCrow

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zwei Bilder nebeneinander, sollen kleiner werden!	cecyle	CSS	1	12.01.2014 18:20
Text neben skalierendem Bild vertikal zentriert	manya	CSS	7	25.04.2013 15:01
Onmouseover-Effekt - Wenn Maus auf Bild1 soll Bild 2 zu Bild 3 wechseln.	Andreas91	Grafik, Design, Typografie	1	06.09.2011 22:41
Bild durch Bild ersetzten! (a:hover)	Prof. Awesome	CSS	11	16.03.2011 14:33
Bild über Bild	rafa	CSS	2	24.01.2010 18:46