<div class="container">
  <div class="top-left"></div>
  <div class="top-right"></div>
  <div class="bottom-left"></div>
  <div class="bottom-right"></div>
</div>

<!-- This is not part of Pen -->
<a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="_blank" style="color:#fff"></a>

body{background:#000}
div{display:block;position:absolute}

.container{
  width:200px;
  height:200px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
  }

.container div{
  width:100px;
  height:100px;
  top:50px;
  left:50px
  }

.top-left{animation:tl 7.5s ease infinite}
.top-right{animation:tr 7.5s ease infinite}
.bottom-left{animation:bl 7.5s ease infinite}
.bottom-right{animation:br 7.5s ease infinite}

.container div:before,
.container div:after
  {display:block;position:absolute;content:""}

.container div:before{width:50px;height:50px}

.top-left:before{
  background:#fbbc05;
  top:0;
  left:0;
  border-radius:100% 0 0 0
  }

.top-right:before{
  background:#ea4335;
  top:0;
  right:0;
  border-radius:0 100% 0 0
  }

.bottom-left:before{
  background:#34a853;
  bottom:0;
  left:0;
  border-radius:0 0 0 100%
  }

.bottom-right:before{
  background:#4285f4;
  bottom:0;
  right:0;
  border-radius:0 0 100% 0
  }

.container div:after{
  background:#000;
  width:25px;
  height:25px;
  z-index:1
  }

.top-left:after
  {top:25px;left:25px;border-radius:100% 0 0 0}

.top-right:after
  {top:25px;right:25px;border-radius:0 100% 0 0}

.bottom-left:after
  {bottom:25px;left:25px;border-radius:0 0 0 100%}

.bottom-right:after
  {bottom:25px;right:25px;border-radius:0 0 100% 0}

@keyframes tl{
  0%,96%,100%{transform:rotate(0deg)}
  12%{transform:rotate(-45deg)}
  24%{transform:rotate(-90deg)}
  36%{transform:rotate(-135deg)}
  48%{left:50px;transform:rotate(-180deg)}
  60%{left:125px;opacity:1;transform:rotate(-135deg)}
  61%,95%{opacity:0}
  }

@keyframes tr{
  0%{transform:rotate(0deg)}
  12%{transform:rotate(-45deg)}
  24%{transform:rotate(-90deg)}
  36%{transform:rotate(-135deg)}
  48%{transform:rotate(-180deg)}
  60%{transform:rotate(-225deg)}
  72%{transform:rotate(-270deg)}
  84%{transform:rotate(-315deg)}
  96%,100%{transform:rotate(-360deg)}
  }

@keyframes bl{
  0%,100%{transform:rotate(0deg)}
  12%{transform:rotate(-45deg)}
  24%{left:50px;transform:rotate(-90deg)}
  36%{left:125px;opacity:1;transform:rotate(-45deg)}
  37%,83%{opacity:0}
  84%{left:-25px;opacity:1;transform:rotate(-45deg)}
  96%{left:50px;transform:rotate(0deg)}
  }

@keyframes br{
  0%,96%,100%{transform:rotate(0deg)}
  12%{left:125px;opacity:1;transform:rotate(45deg)}
  13%,59%{opacity:0}
  60%{left:-25px;opacity:1;transform:rotate(45deg)}
  72%{left:50px;transform:rotate(90deg)}
  84%{transform:rotate(45deg)}
  }