<div class="container">
   <div class="envelope">
      <div class="switch"></div>
   </div>
</div>
body {
  background-color: #F5F7FE;
}

.container {
  width: 25%;
  margin: auto;
  padding: 50px;
}

.envelope {
  border: 1px solid #4C6BFA;
  border-radius: 50px;
  width: 114px;
  height: 62px;
  padding: 10 0 10 0;
  animation: color-change-2x 3s ease-in-out alternate infinite;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.switch {
  position: relative;
  border-radius: 100px;
  background-color: #F5F7FE;
  width: 52px;
  height: 52px;
  margin: 5px;
  animation: movement 3s ease-in-out -350ms alternate infinite;
  box-shadow:  0 0 3px rgba(0,0,0,0.5);
}
@keyframes color-change-2x {
  0% {
    background: #F5F7FE;
  }
  40% {
    background: #F5F7FE;
  }
  60% {
    background: #4C6BFA;
  }
  100% {
    background: #4C6BFA;
  }
}

@keyframes movement {
  0% {
    border: 0.5px solid #4C6BFA;
    left: 0px;
   
  }
  40% {
    border: 0.5px solid #4C6BFA;
    left: 0px;
  }
  60% {
    border: 0.5px solid #F5F7FE;
    left: 50px;
  }
  100% {
   border: 0.5px solid #F5F7FE;
   left: 50px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.