Question

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

但我希望这个圆的高度和宽度都是40px而不是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>

如果您希望圆圈从中间 - 中间（即垂直和水平中心）开始，那么您可以使用下面代码段中显示的方法。这里实际的微调器圆由伪元素产生，该伪元素通过使用定位和平移变换定位在父容器的水平和垂直中间。

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

另一方面，如果你想保留偏移但是要从水平和垂直页面中间开始，那么请使用下面的代码片段：

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

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

1 个答案: