SOURCE

    var slogan = document.getElementById('slogan');
    document.getElementById('aniBtn').addEventListener('click', function () {
      slogan.classList.remove('ani');
      setTimeout(function name() {
        slogan.classList.add('ani');
      }, 100);
    })

  <a href="javascript:;" class="ani-btn" id="aniBtn">animation</a>
  <h1 class="slogan ani" id="slogan">
    <span class="txt"></span>
    <span class="ball">
      <i></i>
    </span>
  </h1>

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;zoom:1.000001; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }
header, footer, article, section, nav, menu, hgroup { display: block; clear: all; }
html { font-family: "Microsoft YaHei","Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: auto; -webkit-text-size-adjust: auto;height: 100%; }
body { margin: 0; color: #fff; background-color: #e1e6ea; height: 100%; -webkit-overflow-scrolling: touch;  }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:active { outline: 0; }
img { border: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
textarea { overflow: auto; resize: none; }
input{outline: 0;border:0;font-family: "Microsoft YaHei";border-radius: 0;}
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
ul, ol { list-style: none outside none; }
body{
	background: #618ee2;
}
.ani-btn{
  font-size: 20px;
  color: #618ee2;
  line-height: 50px;
  width: 150px;
  margin: 50px auto;
  display: block;
  background: #fff;
  text-align: center;
}

.slogan {
  width: 750px;
  margin: 0 auto;
  position: relative;
  font-size: 0;
  height: 526px;  
}
.slogan .txt {
  height: 100%;
  width: 100%;
  background: url(https://img4.99.com/mykd/img/2018/07/05/slogan.png) no-repeat center top;
}
.slogan span,
.slogan i {
  display: block;
}
.ball {
  display: block;
  position: absolute;
  width: 275px;
  height: 272px;
  background: url(https://img4.99.com/mykd/img/2018/07/05/ball-bg.png) no-repeat left top;
  padding: 66px 0 0 28px;
  top: 240px;
  left: 40px;
      opacity: 0;
}
.ball i {
  -webkit-animation: ballScroll 1s linear infinite;
  animation: ballScroll 1s linear infinite;
  display: block;
  width: 141px;
  height: 141px;
  background: url(https://img4.99.com/mykd/img/2018/07/05/ball.png) no-repeat;
}

.slogan.ani .txt {
      -webkit-animation: sloganShake 0.3s 0.1s;
      animation: sloganShake 0.3s 0.1s;
}

.slogan.ani .ball {
  -webkit-animation: ballIn 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  animation: ballIn 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
@-webkit-keyframes ballScroll {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ballScroll {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes sloganShake {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  50% {
    -webkit-transform: skew(-5deg, -5deg) translate3d(10px, -10px, 0);
    transform: skew(-5deg, -5deg) translate3d(10px, -10px, 0);
  }
  70% {
    -webkit-transform: translate3d(-7px, 7px, 0);
    transform: translate3d(-7px, 7px, 0);
  }
  85% {
    -webkit-transform: translate3d(5px, -5px, 0);
    transform: translate3d(5px, -5px, 0);
  }
}

@keyframes sloganShake {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  50% {
    -webkit-transform: skew(-5deg, -5deg) translate3d(10px, -10px, 0);
    transform: skew(-5deg, -5deg) translate3d(10px, -10px, 0);
  }
  70% {
    -webkit-transform: translate3d(-7px, 7px, 0);
    transform: translate3d(-7px, 7px, 0);
  }
  85% {
    -webkit-transform: translate3d(5px, -5px, 0);
    transform: translate3d(5px, -5px, 0);
  }
}

@-webkit-keyframes countryIn {
  0%,
  100% {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


@-webkit-keyframes ballIn {
  0% {
    -webkit-transform: translate(-200px, 200px);
    transform: translate(-200px, 200px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(5px, -5px) skew(6deg, 6deg);
    transform: translate(5px, -5px) skew(6deg, 6deg);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(-2px, 2px) skew(5deg, 5deg);
    transform: translate(-2px, 2px) skew(5deg, 5deg);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes ballIn {
  0% {
    -webkit-transform: translate(-200px, 200px);
    transform: translate(-200px, 200px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(5px, -5px) skew(6deg, 6deg);
    transform: translate(5px, -5px) skew(6deg, 6deg);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(-2px, 2px) skew(5deg, 5deg);
    transform: translate(-2px, 2px) skew(5deg, 5deg);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}