@keyframes msMove {
  0% {
    transform: translateY(0%);
    border-color: #fff; }
  50% {
    transform: translateY(20%);
    border-color: rgba(255, 255, 255, 0.5); }
  100% {
    transform: translateY(0%);
    border-color: #fff; } }

@keyframes msTracker {
  0% {
    opacity: 1;
    top: 15%;
    transform: scale(1); }
  25% {
    opacity: 1; }
  50% {
    opacity: 0;
    top: 60%;
    transform: scale(0.2); }
  60% {
    top: 30%;
    opacity: 0;
    transform: scale(0.2); }
  100% {
    opacity: 1;
    top: 15%;
    transform: scale(1); } }

.mouse-scroll {
  position: relative;
  width: 28px;
  height: 42px;
  border: 1px solid #fff;
  border-radius: 11.998px;
  animation-name: msMove;
  animation-duration: 2s;
  animation-iteration-count: infinite; }
  .mouse-scroll:after {
    content: '';
    background: #fff;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: 15%;
    left: calc(50% - 3px);
    animation-name: msTracker;
    animation-duration: 2s;
    animation-iteration-count: infinite; }