CodePen

HTML

            
              <section id="demo">
  <header>
    <h1>CSS animations in a circular mask</h1>
  </header>
  
  <button id="toggle-inspect">Toggle inspect mode</button>

  <div class="stage">
    <div class="circular-mask"></div>
    <div class="block" id="block1"></div>
    <div class="block" id="block2"></div>
  </div>
</section>
            
          
!

CSS

            
              .stage {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  
  &:hover {
    background: lighten(#FF5C71, 10%);
    
    .circular-mask {
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
    }
  }
}

.circular-mask {
  box-sizing: border-box;
  position: absolute;
  width: 380px;
  height: 380px;
  border: 100px solid #ccc;
  border-radius: 50%;
  top: -90px;
  left: -40px;
  z-index: 2;
}

.block {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 1;
}

#block1 {
  background: #5CFFD6;
  animation: moveBlock1 4s ease infinite;
}

#block2 {
  right: 0;
  background: #919FBC;
  animation: moveBlock2 4s ease 0.2s infinite;
}

@keyframes moveBlock1 {
  25% {
    transform: translate3d(250px, 150px, 0);
  }
  50% {
    transform: translate3d(250px, 0, 0);
  }
  75% {
    transform: translate3d(0, 150px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes moveBlock2 {
  25% {
    transform: translate3d(-250px, 150px, 0);
  }
  50% {
    transform: translate3d(-250px, 0, 0);
  }
  75% {
    transform: translate3d(0, 150px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.inspect {
  .stage {
    overflow: visible;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }
  
  .circular-mask {
    opacity: 0.5;
    border-color: rgba(255, 0, 0, 0.5);
  }
}

html, body {
  background: #ccc;
  font-family: 'Maiden Orange', sans-serif;
  text-transform: uppercase;
  font-size: 18px;
}

#demo {
  width: 500px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

#toggle-inspect {
  display: block;
  position: relative;
  z-index: 10;
  margin: 0 auto 20px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#toggle-inspect').on('click', function() {
  $('html').toggleClass('inspect');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................