• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] jQuery - CSS3 Animationen mit jQuery beeinflußen (wiederholen)

LikeStar

LikeStar

New member
Hallo Community,

ich spiele aktuell einen Slider mit CSS3 ab.

HTML: 
@keyframes spin {
0%   {left:100%;}
100% {left:0px;}
}

@-webkit-keyframes spin {
0%   {left:100%; }
100% {left:0px;;}
}

@-moz-keyframes spin {
0%   {left:100%;}
100% {left:0px;}
}

@-o-keyframes spin {
0%   {left:100%; }
100% {left:0px;}
}


#image_2 
{
  animation: spin 4s forwards;
  -webkit-animation: spin 4s forwards;
  -moz-animation: spin 4s forwards ;
  -o-animation: spin 4s forwards ;

  -webkit-animation-delay: 4s; 
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;  
}

#image_3 
{
  animation: spin 4s forwards;
  -webkit-animation: spin 4s forwards;
  -moz-animation: spin 4s forwards ;
  -o-animation: spin 4s forwards ;
  
  -webkit-animation-delay: 9s; 
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  animation-delay: 9s; 
  
}

#image_4 
{
  animation: spin 4s forwards;
  -webkit-animation: spin 4s forwards;
  -moz-animation: spin 4s forwards ;
  -o-animation: spin 4s forwards ;
  
  -webkit-animation-delay: 15s; 
  -moz-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s; 

  
}

Nach dem sich das 4. Bild von rechts nach links bewegt, soll das Ganze sich erneut wiederholen. Wie kann ich das bewerkstelligen? Mit jQuery? Aber wie?
 
mikdoe schrieb:
Wie sieht denn der Code dazu aus? Ich sehe dort nur CSS Definitionen.
Zum Vergrößern anklicken....


Mein selbst gebastelter Slider funktioniert einwandfrei.

HTML: 
<div id="image"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>

Ich möchte es anschließend wiederholen lassen. Mehr auch nicht. :)
 
Dafür brauchst du gar kein jQuery, sondern das geht mit reinem CSS:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
@keyframes spin {
0%   {left:  100%; top:    0%;}
20%  {left:    0%; top:    0%;}
25%  {left:    0%; top:    0%;}
45%  {left: -100%; top:    0%;}
98%  {left: -100%; top: -100%;}
99%  {left:  100%; top: -100%;}
100% {left:  100%; top:    0%;}
}


#wrapper #image2 {
	animation-delay: 5s;
	background-color: green;
}

#wrapper #image3 {
	animation-delay: 10s;
	background-color: orange;
}

#wrapper #image4 {
	animation-delay: 15s;
	background-color: red;
}
#wrapper div {
	position: absolute;
	animation: spin 20s forwards;
	animation-iteration-count: infinite;
	background-color: blue;
	border: 1px solid black;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	left: 100%;
	top: 0%;
}
#wrapper {
	position: relative;
	overflow: hidden;
	width: 50%;
	height: 100px;
	border: 2px dashed red;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="image"></div>
	<div id="image2"></div>
	<div id="image3"></div>
	<div id="image4"></div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben