Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>animate a circle to a line in CSS</h1>
<h2>requires box-reflect (-webkit-)</h2>
<div class="shape">hover me
  <div class="quarter-circle"></div>
  <div class="quarter-circle"></div>
  <div class="quarter-circle"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@import 'https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic';

$size: 300px;
* {
  box-sizing: border-box;
  font-weight: 400;
}
body {
  margin: 0;
  font-family: RobotoDraft, sans-serif;
  background: #D32F2F;
  color: #fff;
  text-align: center;
}
.shape {
  position: absolute;
  height: $size;
  width: $size;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: $size/10;
  
  .quarter-circle {
    position: absolute;
    top: 0;
    left: 0;
    border: 10px solid currentColor;
    border-right: 0;
    border-left-color: transparent;
    height: $size;
    width: $size/2;
    border-radius: 100%/50% 0 0 50%;
    clip: rect(0,$size/2,$size/2,0);
    transition-timing-function: linear;
    transition-property: border-width, border-radius, transform;
    transition-delay: 0, 0, 0.3s;
    transition-duration: 0, 0.3s, 0.3s;
    -webkit-box-reflect: right;
    backface-visibility: hidden;
    &:nth-child(2) {
      transform-origin: 100% 50%;
      transform: rotate(90deg);
    }
    &:nth-child(3) {
      transform-origin: 100% 50%;
      transform: rotate(-90deg);
    }
  }
  &:hover {
    .quarter-circle {
      transition-delay: 0.6s, 0.3s, 0;
      border-radius: 0%;
      border-left-width: 0;
      transform: rotate(0deg);
    }
  }
}

SassMeister-output.css

@import "https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic";
* {
  box-sizing: border-box;
  font-weight: 400;
}

body {
  margin: 0;
  font-family: RobotoDraft, sans-serif;
  background: #D32F2F;
  color: #fff;
  text-align: center;
}

.shape {
  position: absolute;
  height: 300px;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}
.shape .quarter-circle {
  position: absolute;
  top: 0;
  left: 0;
  border: 10px solid currentColor;
  border-right: 0;
  border-left-color: transparent;
  height: 300px;
  width: 150px;
  border-radius: 100%/50% 0 0 50%;
  clip: rect(0, 150px, 150px, 0);
  transition-timing-function: linear;
  transition-property: border-width, border-radius, transform;
  transition-delay: 0, 0, 0.3s;
  transition-duration: 0, 0.3s, 0.3s;
  -webkit-box-reflect: right;
  backface-visibility: hidden;
}
.shape .quarter-circle:nth-child(2) {
  transform-origin: 100% 50%;
  transform: rotate(90deg);
}
.shape .quarter-circle:nth-child(3) {
  transform-origin: 100% 50%;
  transform: rotate(-90deg);
}
.shape:hover .quarter-circle {
  transition-delay: 0.6s, 0.3s, 0;
  border-radius: 0%;
  border-left-width: 0;
  transform: rotate(0deg);
}

SassMeister-rendered.html

<h1>animate a circle to a line in CSS</h1>
<h2>requires box-reflect (-webkit-)</h2>
<div class="shape">hover me
  <div class="quarter-circle"></div>
  <div class="quarter-circle"></div>
  <div class="quarter-circle"></div>
</div>