Javascript-форум - Зациклить дивы

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Зациклить дивы (https://javascript.ru/forum/jquery/59754-zaciklit-divy.html)

Зациклить дивы

Три дива крутятся при помощи анимации css3 по очереди по 1 разу(обороту) ну вот как зациклить их с помощью jquery? Ну ни как не пойму! Или мало знаний у меня! Поможете?

Raketa,
может

animation-iteration-count:infinite;

? иначе делайте лаконичный макет и подробное описание

http://take.ms/gG7lY
Не знаю как прислать вам или показать код по другом!
Спасибо Вам!

Raketa,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

не то наваял!

Raketa,
нажать <> кнопка перед вами и вставить код

Raketa,

[HTML]сюда код больше тегов ненадо[/HTML]

я пока поучусь - не сердитесь на меня всё! Всё равно надо овладеть этой технологией!
ну-ка сейчас!

<div class="wrapper">
		<div id="btn-1"></div>
		<div id="btn-2"></div>
		<div id="btn-3"></div>
	</div>

вау! класс! Супер! получилось!!!

[id*="btn"] {
	width: 104px;
	height: 101px;
}

#btn-1 {
	background: url(../img/input_1.png) no-repeat center center;
	-webkit-animation: deg 3s linear ;
}

#btn-2 {
	background: url(../img/input_2.png) no-repeat center center; 
	-webkit-animation: deg 3s linear 3s;
}

#btn-3 {
	background: url(../img/input_3.png) no-repeat center center;
	-webkit-animation: deg 3s linear 6s;
}

@-webkit-keyframes deg {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

Рони! Учитель! Что дальше! Давайте картинки закружим! По очереди чтоб крутились постоянно! Они сейчас по одному разу про-крутятся и всё, остановились! Пожалуйста! Сэнсэй! )

Raketa,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">[id*="btn"]{
    width:104px;
    height:101px;
    background:url(http://javascript.ru/forum/images/smilies/smile.gif) no-repeat center center;
    background-size: cover;
  }

  .active{
    -moz-animation:deg 3s linear;
    -o-animation:deg 3s linear;
    animation:deg 3s linear;
    -webkit-animation:deg 3s linear;
  }

  @-webkit-keyframes deg{
    0%{
      -webkit-transform:rotateY(0deg);
      -moz-transform:rotateY(0deg);
      -o-transform:rotateY(0deg);
      transform:rotateY(0deg);
    }

    50%{
      -webkit-transform:rotateY(180deg);
      -moz-transform:rotateY(180deg);
      -o-transform:rotateY(180deg);
      transform:rotateY(180deg);
    }

    100%{
      -webkit-transform:rotateY(360deg);
      -moz-transform:rotateY(360deg);
      -o-transform:rotateY(360deg);
      transform:rotateY(360deg);
    }
  }

  @keyframes deg{
    0%{
      -webkit-transform:rotateY(0deg);
      -moz-transform:rotateY(0deg);
      -o-transform:rotateY(0deg);
      transform:rotateY(0deg);
    }

    50%{
      -webkit-transform:rotateY(180deg);
      -moz-transform:rotateY(180deg);
      -o-transform:rotateY(180deg);
      transform:rotateY(180deg);
    }

    100%{
      -webkit-transform:rotateY(360deg);
      -moz-transform:rotateY(360deg);
      -o-transform:rotateY(360deg);
      transform:rotateY(360deg);
    }
  }
  </style>
</head>

<body>
    <div class="wrapper">
		<div id="btn-1"></div>
		<div id="btn-2"></div>
		<div id="btn-3"></div>
	</div>
<script>

var d = document.querySelectorAll('[id*="btn"]'), len = d.length, n = len-1;
 function go() {
  d[n].classList.remove('active');
  n = ++n % len;
  d[n].classList.add('active');
  }
var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}

[].forEach.call(d, function(elem, i) {
  PrefixedEvent(elem,'AnimationEnd',go)

});
go()
</script>
</body>

</html>

Да! Да! Да! Спасибо Вам Рони большое! Вот так я хотел сделать! Интересно научиться циклить! Сейчас буду код по болтикам разбирать и понимать! )