How to make animation?
How to make animation background in big-line to image-box stood static
little a-line - small striped
big-line - big stripes outside the circle
image-box - icon and the circle
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);}
} asked June 10th 19 at 14:23
2 answers
answered on
Solution
And he's not moving. Need an image in the block to get to center.
https://jsfiddle.net/3bsuLxuw/
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
answered on 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
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