CSS 旋转动画不是从中心开始的

Question

我尝试使用这个 CSS 动画：http://tobiasahlin.com/spinkit/

但我希望圆圈以 40 像素的高度和宽度开始，而不是从 0 开始。

所以我试试这个：http://jsfiddle.net/Xroad/33ovfgeL/

问题是圆圈不是从他的中心开始的。我需要从顶部和左侧保持 100px 的位置。

@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;
    }
}

Answer 1

那是因为元素是用left 偏移量定位的。从规则中删除以下行，它应该从中心开始。

left: 100px;

设置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>

---

如果您希望圆圈从中间中间（即垂直和水平中心）开始，那么您可以使用下面 sn-p 中看到的方法。这里实际的旋转圆是由伪元素通过定位和平移变换定位在父容器的水平和垂直中间产生的。

.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>

---

如果您出于某种原因想要保留偏移量，但仍要从 容器元素的水平和垂直中间开始，那么只需将偏移量添加到父元素，如下所示：

.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>

另一方面，如果你想保留偏移量但让它从页面的水平和垂直中间开始，那么使用下面的sn-p：

.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>

---

这仅适用于偏移并从圆心扩展。

.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>