CODEWITHSUNDEEP
cssanimationcss-animations
Xroad
Xroad

Reputation: 425

CSS spin animation doesn't start from center

I try to use this CSS animation : http://tobiasahlin.com/spinkit/

But I would like that the circle begin with an height and width of 40px and not from 0.

So I try this : http://jsfiddle.net/Xroad/33ovfgeL/

The problem is that the circle doesn't start from his center. I need to keep a position of 100px from the top and left.

@keyframes sk-scaleout {
    0% {
        width: 40px;
        height: 40px;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

Upvotes: 1

Views: 2339

Answers (1)

Harry
Harry

Reputation: 89760

That is because the element is positioned with a left offset. Remove the below line from the rules and it should start from center.

left: 100px;

Setting transform-origin: 50% 50% is not required because that is anyway the default setting.

.spinner {
  position: relative;
  top: 100px;
  width: 40px;
  height: 40px;
  margin: 10px auto;
  background-color: black;
  z-index: 2;
  border-radius: 100%;
  animation: sk-scaleout 2.5s infinite ease-in-out;
}
@keyframes sk-scaleout {
  0% {
    width: 40px;
    height: 40px;
  }
  100% {
    width: 540px;
    height: 540px;
    opacity: 0;
  }
}
<div class="spinner"></div>

If you want the circle to start at center-mid (that is vertical and horizontal center) then you can use the approach seen in the below snippet. Here the actual spinner circle is produced by the pseudo-element which is positioned at horizontal and vertical mid of parent container by using positioning and translate transforms.

.spinner {
  position: relative;
  min-height: 100vh;
}
.spinner:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: 0px auto;
  background-color: black;
  z-index: 2;
  border-radius: 100%;
  animation: sk-scaleout 2.5s infinite ease-in-out;
}
@keyframes sk-scaleout {
  0% {
    width: 40px;
    height: 40px;
    transform: translateY(-50%) translateX(-50%);
  }
  100% {
    height: 540px;
    width: 540px;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
  }
}
<div class="spinner"></div>

If you for some reason want to retain the offset but still get it to start from horizontal and vertical mid of container element then just add the offset to the parent element like here:

.spinner {
  position: relative;
  top: 100px;
  left: 100px;
  min-height: 100vh;
  border: 1px solid; /* just to illustrate where the element is on screen */
}
.spinner:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: 0px auto;
  background-color: black;
  z-index: 2;
  border-radius: 100%;
  animation: sk-scaleout 2.5s infinite ease-in-out;
}
@keyframes sk-scaleout {
  0% {
    width: 40px;
    height: 40px;
    transform: translateY(-50%) translateX(-50%);
  }
  100% {
    height: 540px;
    width: 540px;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
  }
}
<div class="spinner"></div>

On the other hand if you want to retain the offset but get it to start from horizontal and vertical mid of page then use the below snippet:

.spinner {
  position: relative;
  top: 100px;
  left: 100px;
  min-height: 100vh;
}
.spinner:after {
  position: absolute;
  content: '';
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 40px;
  height: 40px;
  margin: 0px auto;
  background-color: black;
  z-index: 2;
  border-radius: 100%;
  animation: sk-scaleout 2.5s infinite ease-in-out;
}
@keyframes sk-scaleout {
  0% {
    width: 40px;
    height: 40px;
    transform: translateY(-50%) translateX(-50%);
  }
  100% {
    height: 540px;
    width: 540px;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
  }
}
<div class="spinner"></div>

This works with just an offset and expanding from the center of the circle.

.spinner {
  position: relative;
  top: 100px;
  left: 100px;
}
.spinner:after {
  position: absolute;
  content: '';
  width: 40px;
  height: 40px;
  background-color: black;
  z-index: 2;
  border-radius: 100%;
  animation: sk-scaleout 2.5s infinite ease-in-out;
}
@keyframes sk-scaleout {
  0% {
    width: 40px;
    height: 40px;
    transform: translateY(-50%) translateX(-50%);
  }
  100% {
    height: 540px;
    width: 540px;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
  }
}
<div class="spinner"></div>

Upvotes: 4

Related Questions