a.circle

body {
  min-height:100vh;
  display:grid;
  justify-content:center;
  align-content:center;
  perspective:1000px;
  perspective-origin:center top;
  transform-style:preserve-3d;
  overflow:hidden;
}

a.circle {
  width:50vmin;
  height:50vmin;
  transform-style:preserve-3d;
  position:relative;
  
  &:before, &:after {
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    background:center/cover url(https://images.unsplash.com/photo-1486736065690-45e0655d038a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);  
  }
  
  &:before {
    animation:f 4s both;
    @keyframes f {
      from {clip-path:inset(0 80% 0 0);}
      50%, to {clip-path:inset(0 0% 0 0);}
    }  
  }
  
  &:after {
    filter:brightness(0.2);
    transform:rotateY(-180deg);
    animation:g 4s both;
    @keyframes g {
      from {clip-path:inset(0 0 0 20%);transform-origin:20% 0;}
      50%, to {clip-path:inset(0 0 0 100%);transform-origin:100% 0;}
    }
  }
  
  animation:h 1s both;
  transform-origin:center bottom;
  @keyframes h {
    from {transform:rotate(-50deg)}
    to {transform:rotate(-40deg)}
  }
}