过渡一个圆圈以显示

Question

我试图让两个不同点的圆的边界从圆的 x 轴开始，然后从 0%-100% 关键帧开始连接。

我想出了如何创建一个圆圈作为外部 div 并将其分成不同的象限。 1、2、3 和 4。但是，现在我的象限边界都显示在一条线上，而不是在圆的边界上。

如何让象限边框显示成一个圆圈。

我已经在下面创建了我正在尝试做的事情的插图，并展示了我到目前为止所做的事情。

.outer {
  border-radius: 50%;
  height: 500px;
  width: 500px;
  border: 1px solid #e0e0e0;
  position: relative;
}

.quad1,
.quad2 {
  left: 50%;
  border: 5px solid #e0e0e0;
  transform-origin: left bottom;
    -webkit-animation: circle 4s 1 normal forwards;
  animation: circle 4s 1 normal forwards;
}

.quad3,
.quad4 {
  left: 0%;
  border: 5px solid #e0e0e0;
  transform-origin: right top;
    -webkit-animation: circle 4s 1 normal forwards;
  animation: circle 4s 1 normal forwards;
}

.quad1,
.quad4 {
  top: 0%;
  border: 5px solid #e0e0e0;
    -webkit-animation: circle 4s 1 normal forwards;
  animation: circle 4s 1 normal forwards;
}

.quad2,
.quad3 {
  top: 50%;
  border: 5px solid #e0e0e0;
    -webkit-animation: circle 4s 1 normal forwards;
  animation: circle 4s 1 normal forwards;
}


@-webkit-keyframes circle {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes circle {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

<div class="outer">
  <div class="quad1"></div>
  <div class="quad2"></div>
  <div class="quad3"></div>
  <div class="quad4"></div>
</div>

Answer 1

这有点棘手，但却是一个有趣的问题。

有 4 个 quarter-circles。其中两个旋转 90˚，另外两个旋转 180˚ 的时间翻倍。还有两个掩码隐藏第 2 和第 4 象限中的 quarter-circles，直到它们旋转 90˚，此时掩码的 z-indexes 变为不再隐藏 quarter-circles。

检查这个工作 fiddle：https://jsfiddle.net/3x2L47Lv/4/

<div class="wrapper">
    <div class="spinner top topright"></div>
    <div class="spinner top topleft"></div>
    <div class="spinner bottom bottomleft"></div>
    <div class="spinner bottom bottomright"></div>
    <div class="mask q2"></div>
    <div class="mask q4"></div>
</div>

body {
    background-color: white;
}

.wrapper {
    width: 250px;
    height: 250px;
    position: relative;
    background: inherit;
}

.spinner {
    width: 125px;
    height: 125px;
    position: absolute;
    border: 5px solid black;
    z-index: 10;
}

.top {
    top: 130px;
    left: 130px;
    border-radius: 0 0 130px 0;
    border-left: none;
    border-top: none;
    transform-origin: top left;
}

.bottom {
    border-radius: 130px 0 0 0;
    border-bottom: none;
    border-right: none;
    transform-origin: bottom right;
}

.topright, .bottomleft {
    animation: rotate90 2s linear forwards;
}

.topleft, .bottomright {
    animation: rotate180 4s linear forwards;
}

.mask {
    width: 130px;
    height: 130px;
    position: absolute;
    opacity: 1;
    background: inherit;
    z-index: 15;
    animation: mask 4s linear forwards;
}


.q2 {
    top: 0;
    left: 0;
}

.q4 {
    top: 130px;
    left: 130px;
}


@keyframes rotate90 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-90deg); }
}

@keyframes rotate180 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-180deg); }
}

@keyframes  mask {
    0%   {z-index: 15}
    100% {z-index: 4}
}

更新：

如果你想让它完成一个圆圈，然后反转，你可以做的是使所有动画时间相同，然后将@keyframes更改为以下:

@keyframes rotate90 {
    0%       { transform: rotate(0deg); }
    25%, 75% { transform: rotate(-90deg); }
    100%     { transform: rotate(0deg); }
}

@keyframes rotate180 {
    0%  { transform: rotate(0deg); }
    50% { transform: rotate(-180deg); }
   100% { transform: rotate(0deg); }
}

@keyframes  mask {
    0%  {z-index: 15}
    50% {z-index: 4}
   100% {z-index: 15}
}

Fiddle 效果反转示例：https://jsfiddle.net/3x2L47Lv/6/

过渡一个圆圈以显示

Transitioning a circle to show

html

css

animation

css-transitions