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

Question

[sanke46]

Как правильно сделать анимацию заднего фона в big-line , чтобы image-box стоял статично


little-line - маленькая полосочка
big-line - большая полоска вне круга
image-box - иконка и круг

<div class="little-line">
   <div class="big-line">
	  <div class="image-box">
	     <img src="img/icon_bitter.svg" alt="icon-bul">
	  </div>
   </div>
</div>

.little-line {}

.big-line {
  -webkit-animation: spin 0.7s infinite linear;
-moz-animation: spin 0.7s infinite linear;
-o-animation: spin 0.7s infinite linear;
-ms-animation: spin 0.7s infinite linear;
}

.image-box {}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}

Answer 1

[Stalker_RED]

А он и не двигается. Нужно изображение в блоке получше отцентрировать.
https://jsfiddle.net/3bsuLxuw/

Comments

[sanke46]

как сделать так чтобы круг и иконка стояли на месте

[Stalker_RED]

sanke46, отцентрировать. чтобы центр круга совпадал с центром блока.

Answer 2

[Александр Косицын]

Задай image-box позишн абсолют. Ты делаешь анимацию на родителя картинки, поэтому она тоже крутится. Тебе нужно ее вынести из потока чтобы не анимировался потомок big-line.
Либо поставь big-line как соседа для image-box.
Тогда spin будет крутить только его.
У тебя смотри, spin крутить элемент big-image и всех его потомков, а это и есть image-box