How to make animation?

How to make animation background in big-line to image-box stood static

5a3681af6de7f808568414.gif
little a-line - small striped
big-line - big stripes outside the circle
image-box - icon and the circle

<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 a-line {}

.big-line {
 -webkit-animation: spin 0.7 s infinite linear;
-moz-animation: spin 0.7 s infinite linear;
-o-animation: spin 0.7 s infinite linear;
-ms-animation: spin 0.7 s 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);}
}
June 10th 19 at 14:23
2 answers
June 10th 19 at 14:25
Solution
And he's not moving. Need an image in the block to get to center.
https://jsfiddle.net/3bsuLxuw/
how to make a circle and icon stood on the site - pinkie82 commented on June 10th 19 at 14:28
, to center. to the center of the circle coincided with the center of the block. - Austen.Thompson53 commented on June 10th 19 at 14:31
June 10th 19 at 14:27
Ask image-box position absolute. Are you doing the animation on the parent images, so it is also spinning. You need to learn from the thread not to animirovanye a descendant of the big score.
Or put a big line as a neighbor for image-box.
Then spin will spin only.
You see, spin spin the big element-image and all of its descendants, and this is the image-box

Find more questions by tags FrontendLayoutCSSHTML