Как сделать анимацию вращения колеса?

Question

[Александр]

Есть спрайт для вращения колеса, т.е. имеется каждое его положение. наклон и тд, как заставить его крутиться? Просто применив смещение через background-position получается не красиво

уточню, вращается колесо не вокруг своей оси как в автомобиле, а слева на правок как буд-то на полу стоит и крутишь его на месте

Answer 1

[GreatRash]

https://jsfiddle.net/simurai/CGmCe/

Comments

[Александр]

то что нужно только почему у меня на реальном примере видны переходы, сдвиги

[GreatRash]

Александр: киньте ссылку, я посмотрю

[Александр]

GreatRash: https://jsfiddle.net/q6ojxcqn/1/

[GreatRash]

Александр: У вас количество шагов анимации (кадров) задано 10, а на картинке у вас 35 кадров. И максимальное смещение непонятно откуда вы задали: у вас -3731, а реальная высота спрайта - 14517 пикселей. Вот исправленный вариант:

https://jsfiddle.net/rrbq5034/ - заодно спрайт надо выровнять по высоте, сейчас видно, что колесо вниз уезжает.

[Александр]

смещение сделал -3731 т.к. нужно именно на столько его сместить, потом в следующей анимации оно будет смещаться дальше, соответственно 10 кадров. Или лучше спрайт разбить на несколько (ибо анимаций будет несколько) и тогда указывать максимальное кол-во шагов и смещение ?

[GreatRash]

Александр: Сам спрайт у вас довольно большой. подозреваю, что вес у него под мегабайт. Я бы разбил его на несколько (особенно если анимаций тоже несколько), в таком случае обе картинки будут грузиться одновременно (асинхронно) и юзер быстрее увидит хотя бы одну из них.

[Александр]

GreatRash: спасибо большое за помощь!

Answer 2

[Кирилл]

Если именно спрайт хотите анимировать, по погуглите по запросу "jquery png animation", сразу станет понятно в какую сторону дальше копать.

Answer 3

[Сергей Горячев]

jqueryhouse.com/jquery-360-degree-image-rotation-p...
Выбирайте)))

Answer 4

[Ярослава]

Добрый день!

Может быть не заморачиваться и сделать проще вращение колеса?

div {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: gray;
  margin: 0 auto;
  text-align: center;
}
div:hover {
  -webkit-animation: spin 0.8s infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

Hover to see effect: <div>Spin</div>

Comments

[Ярослава]

Вот еще хороший пример:
codepen.io/thebabydino/pen/hkxGp

[Александр]

уточню, вращается колесо не вокруг своей оси как в автомобиле, а слева на правок как буд-то на полу стоит и крутишь его на месте

[Ярослава]

Александр: что-то я не догоняю...(

[Ярослава]

Ярослава: не такого плана кручение? codepen.io/jabranr/pen/GLFjv (не смотрите, что это для подгрузки, смысл такой же)

[Александр]

Ярослава: не такое ))) типа такого xiper.net/examples/html-and-css-tricks/effects/fli... только тут 2 стороны а у меня их штук 100

[Ярослава]

Александр: поняла, спасибо.
Не совсем то, но может натолкнет на мысль:
codepen.io/roydigerhund/pen/WwyYgw
codepen.io/roydigerhund/pen/YqLaJm

[maxgeor]

Ярослава, в твоём варианте

div_1 {
-webkit-animation: spin 0.8s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

если структура следующая:

<div_1>
        <div_2>
                 <div_3><img></div_3>
        </div_2>
</div_1>

твой вариант применяеться к , но необходимо, чтобы в не вращалось!
Как? Плиз!

Answer 5

[uugh]

слево на право:
spritespin.ginie.eu