Форум

Raketa · #11 (**permalink**) 25.11.2015, 14:47

[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 · #12 (**permalink**) 25.11.2015, 14:56

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

рони · #13 (**permalink**) 25.11.2015, 16:16

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>

Raketa · #14 (**permalink**) 25.11.2015, 16:20

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

Форум

Справочник

Discord чат

Курсы javascript