Ergebnis 1 bis 6 von 6
  1. #1
    Avatar von LikeStar
    LikeStar ist offline Tripel-As
    registriert
    03-07-2014
    Beiträge
    216

    jQuery - CSS3 Animationen mit jQuery beeinflußen (wiederholen)

    Hallo Community,

    ich spiele aktuell einen Slider mit CSS3 ab.

    HTML-Code:
    @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?

  2. #2
    Avatar von LikeStar
    LikeStar ist offline Tripel-As
    registriert
    03-07-2014
    Beiträge
    216

    AW: jQuery - CSS3 Animationen mit jQuery beeinflußen (wiederholen)

    Keine Unterstützung? =/

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.933

    AW: jQuery - CSS3 Animationen mit jQuery beeinflußen (wiederholen)

    Wie sieht denn der Code dazu aus? Ich sehe dort nur CSS Definitionen.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  4. #4
    Avatar von LikeStar
    LikeStar ist offline Tripel-As
    registriert
    03-07-2014
    Beiträge
    216

    AW: jQuery - CSS3 Animationen mit jQuery beeinflußen (wiederholen)

    Zitat Zitat von mikdoe Beitrag anzeigen
    Wie sieht denn der Code dazu aus? Ich sehe dort nur CSS Definitionen.

    Mein selbst gebastelter Slider funktioniert einwandfrei.

    HTML-Code:
    <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. :-)

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: jQuery - CSS3 Animationen mit jQuery beeinflußen (wiederholen)

    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>

  6. #6
    Avatar von LikeStar
    LikeStar ist offline Tripel-As
    registriert
    03-07-2014
    Beiträge
    216

    AW: jQuery - CSS3 Animationen mit jQuery beeinflußen (wiederholen)

    Zitat Zitat von kkapsner Beitrag anzeigen
    Dafür brauchst du gar kein jQuery, sondern das geht mit reinem

    Ah. Super. Schau ich mir gleich an :-)

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 06-06-2012, 23:26
  2. css3 background mit jQuery - problem mit Safari & Mac
    Von freshUser im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 13-01-2011, 13:18
  3. jQuery ? CSS3 Lightbox Gallery
    Von jswelt bot im Forum Links & Tutorials mit Tipps & Tricks zu JavaScript, CSS, PHP, MySQL
    Antworten: 2
    Letzter Beitrag: 14-04-2010, 00:16
  4. DJ Mischpult mit CSS3 und jQuery
    Von pee im Forum Best of WWW
    Antworten: 1
    Letzter Beitrag: 24-11-2009, 00:24

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •