JSFiddle - React, Tailwind, and code Playground

by l2banners

HTML

<div class="box">
  <div class="box__decor"></div>
</div>

CSS

body {
  min-height:  100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}

.box {
  width: 300px;
  height: 300px;
  border: 6px solid rgb(226, 226, 226);
  position: relative;
  box-sizing: border-box;
}

.box__decor {
  width: 50px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.85);
    position: absolute;
    left: 0;
    top: -30px;
    z-index: 2;
    animation: decor 16s linear infinite;
    box-shadow: 0 0 41px #fff, 0 2px 13px #fff;
    border-radius: 50%;
}

@keyframes decor {
	0% {
		left: -28px;
    top: -10px;
    transform: scale(0) rotate(0deg);
	}
  12% {
    transform: scale(1) rotate(0deg);
  }
  23% {
    transform: scale(0) rotate(0deg);
  }
	25% {
		left: calc( 100% - 23px );
    top: -10px;
    transform: scale(0) rotate(90deg);
	}
  38% {
    transform: scale(1) rotate(90deg);
  }
  49% {
    transform: scale(0) rotate(90deg);
  }
	50% {
		left: calc( 100% - 23px );
    top: calc( 100% - 6px );
    transform: scale(0) rotate(0deg);
  } 
  62% {
    transform: scale(1) rotate(0deg);
	}
  74% {
    transform: scale(0) rotate(0deg);
  }
  75% {
    left: -28px;
    top: calc( 100% - 6px );
    transform: scale(0) rotate(90deg);
  }
  88% {
    transform: scale(1) rotate(90deg);
  }
  99% {
    transform: scale(0) rotate(90deg);
  }
  100% {
    left: -28px;
    top: -30px;
    transform: scale(0) rotate(90deg);
  }
}