CSS3 애니메이션은 여러 개의 점프 공 효과를 구현합니다(음성 입력 애니메이션).

 <div 클래스="공"></div>

 .공 {
  너비: 20px;
  높이: 20px;
  테두리 반경: 50%;
  위치: 상대;
  animation-name: bounce; // 애니메이션 이름 animation-duration: 1.6s; // 단일 애니메이션 지속 시간 animation-iteration-count: unlimited; // 애니메이션 무한 루프 배경: rgb(244, 7, 7); 색상}
//키프레임 애니메이션 @keyframes 튀는 {
  0% {
    top: 0px; //처음에는 맨 위에 있습니다.}
  50% {
    상단: 100px; // 하단 중간}
  100% {
    top: 0px; // 마지막으로 맨 위로 돌아갑니다.}
}

 /** 공 = [1,2,3,4,5] 여러 공*/
<div v-for="ball in ball" :key="ball" :class="['ball', `ball${ball}`]"></div>

 //공개 스타일 추출.공 {
  너비: 20px;
  높이: 20px;
  테두리 반경: 50%;
  위치: 상대;
  animation-name: bounce; // 애니메이션 이름 animation-duration: 1.6s; // 단일 애니메이션 지속 시간 animation-iteration-count: Infinite;
.ball1 {
  @extend .ball;
  왼쪽: 0;
  배경: rgb(244, 7, 7);
}
.ball2 {
  @extend .ball;
  animation-delay: 0.25s; // 남은 애니메이션 지연: 30px;
  배경: rgb(16, 106, 241);
}
.ball3 {
  @extend .ball;
  animation-delay: 0.5s; // 남은 애니메이션 지연: 60px;
  배경: rgb(251, 236, 13); 
}
.ball4 {
  @extend .ball;
  animation-delay: 0.75s; // 남은 애니메이션 지연: 90px;
  배경: rgb(233, 23, 233); 
}
.ball5 {
  @extend .ball;
  animation-delay: 1.0s; // 남은 애니메이션 지연: 120px;
  배경: rgb(6, 247, 6); 
}
//키프레임 애니메이션 @keyframes 튀는 {
 0% {
    top: 0px; //처음에는 맨 위에 있습니다.}
  50% {
    상단: 100px; // 하단 중간}
  100% {
    top: 0px; // 마지막으로 맨 위로 돌아갑니다.}
}

 <el-button id="bounceBallBtn">음성 입력</el-button>
 <bounce-ball v-if="showBounce" />

 /** 데이터 showBounce: false */
탑재() {
	let theBounceBtn = document.getElementById("bounceBallBtn");
	//모바일 단말기 theBounceBtn.addEventListener("touchstart", this.startBounce, false);
	theBounceBtn.addEventListener("touchend", this.endBounce, false);
	// PC 측 theBounceBtn.addEventListener("mousedown", this.startBounce, false);
	theBounceBtn.addEventListener("mouseup", this.endBounce, false);
}
  /** 애니메이션 표시*/
 startBounce(이벤트) {
   event.preventDefault();
   this.showBounce = true;
 },
 /** 애니메이션 숨기기*/
 endBounce(이벤트) {
   event.preventDefault();
   this.showBounce = 거짓;
 },