css实现开红包的效果

.hongbao{
          background:url('../../image/public/red_packet/back.png');
          /*background:#FFF;*/
          background-size: 100% 100%;
          /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
          /* For IE 8*/
          /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
          width: 75%;
          height: 17.5rem;
          /*line-height: 15rem;*/
          margin-left: 12.5%;
          margin-top: 8rem;
          border-radius:0.5rem;
          /*text-align: center;*/
        }
        .open_div{
          display:flex;justify-content:center;
        }
        .open_back{
          background-image:url('../../image/public/red_packet/open_back.png');
          background-size: 100% 100%;
          width:5.6rem;
          height:5.6rem;
          margin-top: 3rem;
          display:flex;
          justify-content:center;
          align-items:center;
          /*transform: rotateY(180deg);
          -webkit-transform: rotateY(180deg);*/
        }
        @keyframes move {
            0% {
            　　transform: rotateY(0deg);
             　 -webkit-transform: rotateY(0deg);
            }
            100% {
               transform: rotateY(360deg);
               -webkit-transform: rotateY(360deg);
            }
        }

document.getElementbyId('open_back').onclick = function(e){
    //屏蔽父层点击事件
    e.stopPropagation();
    //红包开字图片旋转
    document.getElementbyId('open_back').style.cssText = 'animation: move 3s ease-in-out infinite;'
    setTimeout(function(){
      //结束凯开字图片旋转
      document.getElementbyId('open_back').style.cssText= 'animation-play-state:paused;'
     
    },3000)

  }