Форум

hhh · #1 (**permalink**) 14.04.2014, 19:35

Как при загрузке страницы сделать чтобы вращалось изображение?
Через css3, keyframes получилось замутить. Только как запускать при загрузке затрудняюсь сделать.

Aetae · #2 (**permalink**) 14.04.2014, 20:42

М?

<style>
.fadeIn {
	border:5px solid #000;
	margin:15px auto;
	opacity:0;

	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	-o-animation-duration:3s;
	animation-duration:3s;

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

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
</style>
<img class="fadeIn" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

hhh · #3 (**permalink**) 14.04.2014, 21:20

Спасибо, но это не вращение. С rotate не работает.

рони · #4 (**permalink**) 14.04.2014, 21:33

hhh,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
img {
	animation: spin 1s linear infinite;
	animation-play-state: running;
}

@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}
  </style>
</head>

<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
</body>

</html>

hhh · #5 (**permalink**) 14.04.2014, 21:59

Ура, спасибо! А как сделать чтобы вращнулось на 360 градусов, а потом обратно и остановилось. Именно так работает с transition, и мне так надо при загрузке

hhh · #6 (**permalink**) 14.04.2014, 22:23

Добавил - animation-iteration-count: 2 и останавливается. Только не могу понять как сделать чтобы назад два оборота сделал img и стоп.
Две анимации по очереди не работают.

рони · #7 (**permalink**) 14.04.2014, 22:26

hhh,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
img {
	-webkit-animation: spin 5s ease-in-out;
	-moz-animation: spin 5s ease-in-out;
	-o-animation: spin 5s ease-in-out;
	animation: spin 5s ease-in-out;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes spin {
	50% {
		-webkit-transform: rotate(1turn);
		-moz-transform: rotate(1turn);
		-o-transform: rotate(1turn);
		-ms-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
@keyframes spin {
	50% {
		-webkit-transform: rotate(1turn);
		-moz-transform: rotate(1turn);
		-o-transform: rotate(1turn);
		-ms-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
  </style>
</head>

<body>
<img src="http://img-fotki.yandex.ru/get/5907/annaze63.1af/0_5d68a_90b222f3_S" alt="">
</body>

</html>

hhh · #8 (**permalink**) 14.04.2014, 22:31

Спасибо! За что люблю этот форум, за то что тут всегда помогают всем.

Coder_x · #9 (**permalink**) 18.03.2016, 18:32

var total; глобальная переменная

в любое событие вставляете этот код

var image = $("#img");
total += 90;
image.css("transition","all 3s");
var rotate = "rotate(" + total + "deg)"
image.css("transform",rotate);

в данном случае угол поворота изображения составляет 90 градусов

вот вам простой код без плагинов !

Форум

Справочник

Discord чат

Курсы javascript