CSS circle for when uploading an image on drag and drop

UploadCircle.css

.center-circle, .upload-circle {
  margin: 0 auto;
  margin-top: calc(50% - 300px);
}

.abs, .upload-circle:before, .upload-circle:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.circle-base, .upload-circle, .upload-circle:before {
  width: 300px;
  height: 300px;
  background-color: lightgrey;
  border-radius: 50%;
  text-align: center;
  color: white;
}

.upload-circle {
  position: relative;
}
.upload-circle:before {
  content: '';
  background-color: lightblue;
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-duration: 1500ms;
          animation-duration: 1500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  z-index: -1;
}
.upload-circle:after {
  content: 'Drop image to upload!';
  color: black;
  font-family: Verdana;
  font-size: 20px;
  line-height: 300px;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    background-color: rgba(173, 216, 230, 0.1);
  }
  48%, 52% {
    -webkit-transform: scale3d(1.05, 1.05, 1);
            transform: scale3d(1.05, 1.05, 1);
    background-color: lightblue;
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    background-color: rgba(173, 216, 230, 0.1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    background-color: rgba(173, 216, 230, 0.1);
  }
  48%, 52% {
    -webkit-transform: scale3d(1.05, 1.05, 1);
            transform: scale3d(1.05, 1.05, 1);
    background-color: lightblue;
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    background-color: rgba(173, 216, 230, 0.1);
  }
}