0

When the element rotated , it is not in the middle and moves.

CSS:

div {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 16px solid rgb(235, 235, 235);
border-top: 16px solid rgb(83, 83, 192);
border-radius: 50%;
animation: loading 2s linear infinite;
transition-property: transform;
transform: translate(-50% , -50%);}

@-moz-kayframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}

}

and HTML:

<div></div>
Mr.Masiha
  • 11
  • 2
  • 1
    Your code is not animating, can you reproduce the issue for us and let us know what exactly the issue is. – Manjuboyz Apr 02 '20 at 17:46

1 Answers1

1

Problem is that you are using transform: translate(-50% , -50%); to center your element but in your @keyframes you override transform by rotation() which overrides your translate(). If you would put translate() to animation too your div would be rotating around because origin (the anchor of rotation) would be different each frame.

So you can:
1) Center your element with left and top like this:

div {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border: 16px solid rgb(235, 235, 235);
  border-top: 16px solid rgb(83, 83, 192);
  border-radius: 50%;
  animation: loading 2s linear infinite;
  /*transform: translate(-50% , -50%);*/
}

@keyframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<div></div>

2) or use some parent element which will be centered and your animated div will be inside of it.

.child {
  width: 100px;
  height: 100px;
  border: 16px solid rgb(235, 235, 235);
  border-top: 16px solid rgb(83, 83, 192);
  border-radius: 50%;
  animation: loading 2s linear infinite;
}
.parent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
}

@keyframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<div class="parent">
  <div class="child"></div>
</div>

+ I've deleted transition-property because you don't need it. You are using animation not transition.

Jax-p
  • 7,225
  • 4
  • 28
  • 58
  • How do I know how to put it in the middle? How much do I add or subtract? CSS: calc (50% - 50px); – Mr.Masiha Apr 02 '20 at 19:29
  • Because `100px` is `width` and `height` of element and `50px` half of it. You put element in `50%` of X and Y axis of window. So element will start (top-left corner) at 50% of parent/window. Than you have to substract half of the element height/width to get into the center. – Jax-p Apr 02 '20 at 19:34