javascript - 停止动画并在悬停时将所有圆圈对齐在同一条线上

Question

我制作了一个悬停时必须如下图所示的动画； 1 但它总是像这样对齐； 2 当动画在鼠标悬停时暂停时，我想将所有对齐在一条直线上。但它没有发生。我尝试使用 animation-fill-mode:forwards;但它没有用。所有<div id="circle">必须在一条直线上对齐，这样它就像我期望的第一张照片一样，就像一个由几种颜色组成的直线 block 。它只在某个时候发生，但不是每次都发生。我希望它在每次悬停 <div> 时都发生.您也可以使用 javascript。但是这个动画必须工作并且所有<div>必须对齐在一条直线上。

.circle-container{
	height:100px;
	display:flex;
	position:absolute;
	width:fit-content;
	overflow:hidden;
	align-items:center;
	justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
	border-radius:45%;
}

#circle{
	align-items:center;
	justify-content:center;
	color:white;
	display:flex;
	height:55px;
	width:55px;
}
	.circle5{
		background:#FF6347;
		animation:bubbling5 1s infinite;
		animation-direction:alternate;
	}
	.circle4{
		background:#4682B4;
		animation:bubbling4 1s infinite;
		animation-direction:alternate;
	}
	.circle3{
		background:#D2B48C;
		animation:bubbling3 1s infinite;
		animation-direction:alternate;
	}
	.circle2{
		background:#008080;
		animation:bubbling2 1s infinite;
		animation-direction:alternate;
	}
	.circle1{
		background:#D8BFD8;
		animation:bubbling1 1s infinite;
		animation-direction:alternate;
	}
	@keyframes bubbling1 {
    0% {
        transform: translateY(0px) translateX(22px);
    }
    50% {
        transform: translateY(-10px) translateX(22px);
    }
    75% {
        transform: translateY(10px) translateX(22px);
    }
    100% {
        transform: translateY(0px) translateX(22px);
    }
}
	@keyframes bubbling2 {
    0% {
        transform: translateY(0px) translateX(12px);
    }
    45% {
        transform: translateY(-10px) translateX(12px);
    }
    70% {
        transform: translateY(10px) translateX(12px);
    }
    100% {
        transform: translateY(0px) translateX(12px);
    }
}
@keyframes bubbling3 {
    0% {
        transform: translateY(0px) translateX(2px);
    }
    40% {
        transform: translateY(-10px) translateX(2px);
    }
    65% {
        transform: translateY(10px) translateX(2px);
    }
    100% {
        transform: translateY(0px) translateX(2px);
    }
}
@keyframes bubbling4 {
    0% {
        transform: translateY(0px) translateX(-8px);
    }
    35% {
        transform: translateY(-10px) translateX(-8px);
    }
    60% {
        transform: translateY(10px) translateX(-8px);
    }
    100% {
        transform: translateY(0px) translateX(-8px);
    }
}
@keyframes bubbling5 {
    0% {
        transform: translateY(0px) translateX(-18px);
    }
    30% {
        transform: translateY(-10px) translateX(-18px);
    }
    55% {
        transform: translateY(10px) translateX(-18px);
    }
    100% {
        transform: translateY(0px) translateX(-18px);
    }
}
 .circle-container:hover {
	position:absolute;
	}
 .circle-container:hover  .circle5 {
		border-radius:0% 30% 30% 0%;
		animation-play-state:paused;
		transition: all 0.2s;
	}
	
 .circle-container:hover  .circle4 {
		border-radius:0%;
		animation-play-state:paused;
		transition: all 0.4s;
		
	}
 .circle-container:hover  .circle3 {
		border-radius:0%;
		animation-play-state:paused;
		transition: all 0.6s;
	}
 .circle-container:hover  .circle2 {
		border-radius:0%;		
		transition: all 0.8s;
		animation-play-state:paused;
	}
 .circle-container:hover  .circle1 {
		border-radius:30% 0% 0% 30%;
		transition: all 1s;
		animation-play-state:paused;
	}
 .circle-container:hover  .c-title {
 	display:none;
	}

<div class="circle-container">	
	<div id="circle" class="circle1"><h1 class="c-title">E</h1></div>
	<div id="circle" class="circle2"><h1 class="c-title">M</h1></div>
	<div id="circle" class="circle3"><h1 class="c-title">A</h1></div>
	<div id="circle" class="circle4"><h1 class="c-title">I</h1></div>
	<div id="circle" class="circle5"><h1 class="c-title">L</h1></div>
</div>

Answer 1

看起来有人产生了大量不必要的代码 =))

关于你的问题，你必须完全删除动画，而不是暂停它。
请参阅下面的代码段。

.circle-container {
  height: 100px;
  display: flex;
  position: absolute;
  width: fit-content;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.circle-container div {
  display: inline-block;
  height: 55px;
  width: 55px;
  margin-right: -10px;
  border-radius: 45%;
  color: white;
  font:900 2em/55px serif;
  text-align: center;
  animation: bubbling 1s infinite alternate;
  transition: all .2s;
}

.circle-container div:nth-child(1) {
  background: #D8BFD8;
}

.circle-container div:nth-child(2) {
  background: #008080;
  animation-delay: .1s;
}

.circle-container div:nth-child(3) {
  background: #D2B48C;
  animation-delay: .2s;
}

.circle-container div:nth-child(4) {
  background: #4682B4;
  animation-delay: .3s;
}

.circle-container div:nth-child(5) {
  background: #FF6347;
  margin: 0;
  animation-delay: .4s;
}

@keyframes bubbling {
  50% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(10px);
  }
}

.circle-container:hover div {
  border-radius: 0;
  color: transparent;
  transform: translateY(0);
  animation: none;
}

.circle-container:hover div:last-child {
  border-radius: 0 30% 30% 0;
}

.circle-container:hover div:first-child {
  border-radius: 30% 0 0 30%;
}

<div class="circle-container">
  <div>E</div>
  <div>M</div>
  <div>A</div>
  <div>I</div>
  <div>L</div>
</div>