แอนิเมชั่น CSS3 ตระหนักถึงเอฟเฟกต์ของการกระโดดหลายลูก (แอนิเมชั่นอินพุตเสียง)

 <div class="บอล"></div>

 .ลูกบอล {
  ความกว้าง: 20px;
  ความสูง: 20px;
  รัศมีชายแดน: 50%;
  ตำแหน่ง: ญาติ;
  ชื่อแอนิเมชั่น: การตีกลับ; // ชื่อแอนิเมชั่น - ระยะเวลาของแอนิเมชั่น: 1.6s; // แอนิเมชั่น - การวนซ้ำ - นับไม่สิ้นสุด; // แอนิเมชั่นพื้นหลังวนซ้ำไม่สิ้นสุด: rgb (244, 7, 7); สี}
//แอนิเมชั่นคีย์เฟรม @keyframes กระเด้ง {
  0% {
    ด้านบน: 0px; //เริ่มต้นที่ด้านบน}
  50% {
    ด้านบน: 100px; // ตรงกลางที่ด้านล่าง}
  100% {
    ด้านบน: 0px; // ในที่สุดก็กลับสู่ด้านบน}
-

 /** ลูก = [1,2,3,4,5] ลูกหลายลูก*/
<div v-for="ลูกบอลอยู่ในลูกบอล" :key="ball" :class="['ball', `ball${ball}`]"></div>

 // extraction.ball สไตล์สาธารณะ {
  ความกว้าง: 20px;
  ความสูง: 20px;
  รัศมีชายแดน: 50%;
  ตำแหน่ง: ญาติ;
  ชื่อแอนิเมชัน: การตีกลับ; // ชื่อแอนิเมชั่น แอนิเมชั่น-ระยะเวลา: 1.6s; // แอนิเมชั่นจำนวนซ้ำ: อนันต์;
.บอล1 {
  @ ขยาย .ball;
  ซ้าย: 0;
  พื้นหลัง: RGB (244, 7, 7);
-
.บอล2 {
  @ ขยาย .ball;
  แอนิเมชั่นล่าช้า: 0.25s; // แอนิเมชั่นล่าช้าเหลือ: 30px;
  พื้นหลัง: RGB (16, 106, 241);
-
.บอล3 {
  @ ขยาย .ball;
  ภาพเคลื่อนไหวล่าช้า: 0.5s; // ความล่าช้าของภาพเคลื่อนไหวเหลือ: 60px;
  พื้นหลัง: RGB (251, 236, 13); 
-
.บอล4 {
  @ ขยาย .ball;
  แอนิเมชั่นล่าช้า: 0.75s; // แอนิเมชั่นล่าช้าเหลือ: 90px;
  พื้นหลัง: RGB (233, 23, 233); 
-
.บอล5 {
  @ ขยาย .ball;
  แอนิเมชั่นล่าช้า: 1.0s; // แอนิเมชั่นล่าช้าเหลือ: 120px;
  พื้นหลัง: RGB (6, 247, 6); 
-
//แอนิเมชั่นคีย์เฟรม @keyframes กระเด้ง {
 0% {
    ด้านบน: 0px; //เริ่มต้นที่ด้านบน}
  50% {
    ด้านบน: 100px; // ตรงกลางที่ด้านล่าง}
  100% {
    ด้านบน: 0px; // ในที่สุดก็กลับสู่ด้านบน}
-

 <el-button id="bouncingBallBtn">การป้อนข้อมูลด้วยเสียง</el-button>
 <กำยำบอล v-if="showBouncing" />

 /** data showBouncing: false */
ติด() {
	ให้ theBouncingBtn = document.getElementById("bouncingBallBtn");
	// เทอร์มินัลมือถือ theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
	theBouncingBtn.addEventListener("touchend", this.endBouncing, false);
	// ฝั่งพีซี theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
	theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
-
  /** การแสดงภาพเคลื่อนไหว*/
 startBouncing (เหตุการณ์) {
   เหตุการณ์preventDefault();
   this.showBouncing = จริง;
 -
 /** การซ่อนแอนิเมชั่น*/
 endBouncing (เหตุการณ์) {
   เหตุการณ์preventDefault();
   this.showBouncing = เท็จ;
 -