Implementierung des WeChat-Tap-Animationseffekts basierend auf dem CSS3-Animationsattribut

@-webkit-keyframes schütteln {
    0% {
        -webkit-transform: übersetzen(2px, 2px);
    }

    25 % {
        -webkit-transform: übersetzen(-2px, -2px);
    }

    50 % {
        -webkit-transform: übersetzen(0px, 0px);
    }

    75 % {
        -webkit-transform: übersetzen(2px, -2px);
    }

    100 % {
        -webkit-transform: übersetzen(-2px, 2px);
    }
}

@keyframes schütteln {
    0% {
        transformieren: übersetzen(2px, 2px);
    }

    25 % {
        transformieren: übersetzen(-2px, -2px);
    }

    50 % {
        transformieren: übersetzen(0px, 0px);
    }

    75 % {
        transformieren: übersetzen(2px, -2px);
    }

    100 % {
        transformieren: übersetzen(-2px, 2px);
    }
}

.schütteln {
    Position: relativ;
    oben: 30px;
    links: 100px;
    Höhe: 200px;
    Breite: 200px;
    Farbe: #ff0000;
    Hintergrund: #000;
}

.schütteln:hover {
    -webkit-animation: 0,2 s unendlich schütteln;
    Animation: Schütteln 0,2 s unendlich;
}
 /*Aktivitätsschaukelanimation*/
 @-webkit-keyframes swing {
  10% {
    transformieren: drehen (15 Grad);
  }
  20% {
    transformieren: drehen (-10 Grad);
  }
  30% {
    transformieren: drehen (5 Grad);
  }
  40 % {
    transformieren: drehen (-5 Grad);
  }
  50 %, 100 % {
    transformieren: drehen (0 Grad);
  }
}
@-moz-keyframes swing {
  10% {
    transformieren: drehen (15 Grad);
  }
  20% {
    transformieren: drehen (-10 Grad);
  }
  30% {
    transformieren: drehen (5 Grad);
  }
  40 % {
    transformieren: drehen (-5 Grad);
  }
  50 %, 100 % {
    transformieren: drehen (0 Grad);
  }
}
@-o-keyframes schwingen {
  10% {
    transformieren: drehen (15 Grad);
  }
  20% {
    transformieren: drehen (-10 Grad);
  }
  30% {
    transformieren: drehen (5 Grad);
  }
  40 % {
    transformieren: drehen (-5 Grad);
  }
  50 %, 100 % {
    transformieren: drehen (0 Grad);
  }
}
@keyframes schwingen {
  10% {
    transformieren: drehen (12 Grad);
  }
  20% {
    transformieren: drehen (-11,5 Grad);
  }
  30% {
    transformieren: drehen (1 Grad);
  }
  40 % {
    transformieren: drehen (-1 Grad);
  }
  50 %, 100 % {
    transformieren: drehen (0,5 Grad);
  }
}
.staffeln {
  Hintergrundfarbe: #ff0000;
  Breite: 60px;
  Höhe: 60px;
}
.stagger1{
  Animation: Schwung 0,5 s 0,15 s linear 1;
  /* Animation-Wiedergabestatus: angehalten; */
}
 <!-- qq Fenster wackelt-->
  <div class="shake">qq Fenster schütteln</div>
  <!-- WeChat-Avatar zittert-->
  <div class="stagger">WeChat Pat-Avatar zittert</div>

document.querySelector('.stagger').addEventListener('klicken', function() {
      document.querySelector('.stagger').classList.add('stagger1')
      console.log('Papa hat Baby angestupst')
})
	/*Jeder Klick implementiert die Animation. Achten Sie auf das Ende der Überwachungsanimation, entfernen Sie die Animationsklasse und fügen Sie dann die Animationsklasse hinzu. document.querySelector('.stagger').addEventListener('animationend', function() {
      document.querySelector('.stagger').classList.remove('stagger1')
    })