@keyframes mouseMove {
  0% {
    height: 0px;
  }

  25% {
    height: 7px;
  }

  50% {
    height: 7px;
  }

  75% {
    height: 7px;
  }

  100% {
    height: 0px;
  }
}

@keyframes eyeMove {
  0% {
    top: 0px;
  }

  25% {
    top: -1px;
  }

  50% {
    top: 0px;
  }

  75% {
    top: -1px;
  }

  100% {
    top: 0px;
  }
}

.message-success-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  position: relative;
  font-family: "PingFang SC", "Hiragino Sans GB", STHeitiSC, Helvetica, "Helvetica Neue", "Microsoft YaHei", Tahoma;
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.message-success-icon .left-eye {
  position: absolute;
  left: 1px;
  top: 0px;
  background: url("./left-eye.svg");
  height: 4px;
  width: 6px;
}

.message-success-icon .left-eye.eyes-animation {
  animation: eyeMove .5s;
}

.message-success-icon .right-eye {
  position: absolute;
  left: 9px;
  top: 0px;
  background: url("./right-eye.svg");
  height: 4px;
  width: 6px;
}

.message-success-icon .right-eye.eyes-animation {
  animation: eyeMove .5s;
}

.message-success-icon .mouse {
  background: url("./mouse.svg");
  height: 7px;
  margin: 0 auto;
  margin-top: 7px;
  width: 16px;
  background-position: center center;
}

.message-success-icon .mouse .mouse-fadeout {
  height: 0px;
  width: 16px;
  position: absolute;
  background: url("./fade-out.png");
  background-repeat: no-repeat;
  background-position: bottom;
}

.message-success-icon .mouse .fadeOut-top {
  left: 0px;
}

.message-success-icon .mouse .fadeout-move {
  animation: mouseMove .2s linear;
}