css3动画手势指引

<div class="wrapper">
  <div class="circle">完善信息</div>
  <div class="finger"></div>
 </div>
**style部分**
.wrapper {
    
    
             
              position: relative;
              overflow: hidden;
              width: 500px;
              height: 500px;
              margin: 0 auto;
              background-color: black;
             
          }

          .circle {
    
    
              position: absolute;
              left: 40%;
              top: 50%;
              margin: -70px 0 0 -46px;
              /* background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3235945902,3718728125&fm=11&gp=0.jpg") center center no-repeat; */
              width: 182px;
              height: 62px;
              border:1px solid red;
              border-radius: 31px;
              line-height:62px ;
              text-align: center;
              font-size: 20px;
              color:#fff;
              background-color: #09C762;
              /* animation: circleHide 1s ease infinite both; */
          }

          .finger {
    
    
              background: url("https://imgex.17maibaoxian.cn/product/ccic/tiandiguanaibaiwanyiliao_promote/hand.png") center center no-repeat;
              background-size: 30px;
             position: absolute;
              left:180px;
              width: 150px;
              height: 150px;
              margin: 195px auto;
              animation: fingerHandle 1s ease infinite both;
          }
          @keyframes fingerHandle {
    
    
                   /*  0% {
                          transform: none;
                      }
                      70% {
                          transform: scale3d(.8, .8, .8);
                      }
                      100% {
                          transform: none;
                      } */
                     0% {
    
    
                          right: -8px;
                          bottom: -20px;
                      }
                      50% {
    
    
                          right: 15px;
                          bottom: 0px;
                      }
                      100% {
    
    
                          right: -8px;
                          bottom: -20px;
                      }
                  }
        @keyframes circleHide {
    
    
                    0% {
    
    
                        opacity: 0;
                        transform: scale3d(0, 0, 0);
                    }
                    70% {
    
    
                        opacity: 1;
                        transform: scale3d(1.2, 1.2, 1.2);
                    }
                    100% {
    
    
                        opacity: 0;
                        transform: scale3d(0, 0, 0);
                    }
                }