JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<div class="wrapper">
    <div class="vertical-center">
        <div id="container">
        
            <div class="col-md-4 company">
              <!-- inner wrapper -->
              <div class="inner-wrapper grow">
                  <div id="halfclip">
                    <div class="halfcircle" id="clipped">
                    </div>
                  </div>
                  <div class="halfcircle" id="fixed"></div>                
              </div>
              <!-- inner wrapper: end -->

            </div>
            
        </div>
    </div>
</div>

<!--
<li class="col-md-4 company" data-id-company="id-2">
<div class="inner-wrapper">

<div class="img-container">
<img alt="ALIMAR" src="assets/images/alimar.png">
</div>

<div class="txt-container">
<div class="num">5</div>
<div class="desc">BRANDS OF ALIMAR DEVELOPMENT S.A.</div>
<a href="#" class="inline-block readmore">Read More</a>
</div>

</div>
</li>
http://stackoverflow.com/questions/26807610/css-only-animate-draw-circle-with-border-radius-and-transparent-background
-->

CSS

html {
  height: 100%;
}

body {
  margin: 0;
  background-image: url('http://static1.squarespace.com/static/5445aeede4b0104aa94a8484/t/5447f52ae4b0a46113d4b418/1414001963542/AboutPage.jpg?format=1500w');
  position: relative;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  
}

.vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  left: 0;
  right: 0;
}

.wrapper {
  position: relative;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 5;
  min-height: 100vh;
}

#container {
    position: relative;
    top: 0;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    border: solid #fff 1px;
    margin: 0px auto;
    left: 0;
    right: 0;
    bottom: 0;
}

#halfclip {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
   overflow: hidden;
   transform-origin: left center;
}
  
#container:hover #halfclip {
    animation: cliprotate 6s 1 ;
    transform: rotate(180deg);
} 

.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 2px transparent;
   border-top-color: white;
   border-left-color: white;
   
   border-radius: 50%;
}
#clipped {
  width: 200%;
  transform: rotate(-45deg);
}

#container:hover #clipped {
    transform: rotate(135deg);
    animation: rotate 3s linear 2 ;
    animation-timing-function: cubic-bezier(.1,.9,.9,.1);
}

#fixed {
  width: 100%;
    transform: rotate(135deg);  
    opacity: 0; 
}

#container:hover #fixed {
    opacity: 1;
    animation: showfixed 6s 1 ;
}

.grow { transition: all .4s ease-in-out; }
.grow:hover { transform: scale(1.1); }

@-webkit-keyframes cliprotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes cliprotate {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(0deg);}
  50.01% {transform: rotate(180deg);}
  100%...