Questions Transitioning a circle to show [closed]
Becky Asked

I am attempting to make the borders of a circle from two different points start at the x axis of the circle and then from 0%-100% keyframes join to connect.

I figured out how to create a circle as an outer div and I broke it up into different quadrants. 1, 2, 3 and 4. However, right now my borders for the quadrants are all displaying on one line rather than taking on the border of the circle.

How can I make the quadrants borders show in a circle.

I have created an illustration of what I am trying to do below, as well as shown what I have done so far.

enter image description here

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


1 Answers :
digglemister answered

This was a bit tricky, but a fun problem.

There are 4 quarter-circles. Two of them rotate 90˚ and the other two rotate 180˚ in twice the time. There are also two masks that hide the quarter-circles in quadrants 2 and 4 until they have rotated 90˚, at which point the masks' z-indexes change to no longer hide the quarter-circles.

Check out this working 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}
}

UPDATED:

If you want it to complete a circle, then reverse, what you can do is make all animation times the same, then change the @keyframes to the following:

@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 example with effect reversing: https://jsfiddle.net/3x2L47Lv/6/

digglemister replied
@Becky To scale it, make .wrapper whatever width/height you need. Then make .spinner width/height half of .wrapper. Choose whatever border size you need for spinner, then make width/height/border/top/bottom for .top, .bottom, .mask, and .q4 the .spinner width/height PLUS the .spinner border size. Does that make sense?;
digglemister replied
@Becky Yes, exactly.;
digglemister replied
@Becky Sorry that it's a bit difficult to modify for your needs, but I've updated my answer to include reversing the effect.;
digglemister replied
@Becky I think you might be better off adjusting the current keyframes to get a delay. Here's another fiddle that shows how to get a 20% delay, for example. Maybe you can look at this to see how to get the exact delay that you need? jsfiddle.net/3x2L47Lv/8;
Becky replied
Ahhh, I see. I knew you could change the percentages, but I thought the time had to be written inside of the keyframes for some reason. That last fiddles help out a lot! I wish I could up vote you 10 times for this. You helped a bunch and I appreciate it a lot.;