stop animation and align all circles on same line on hover

Question

I have made an animation which on hover must be like the image below;1 But instead it always align like this;2 I want to align all the in a straight line when animation is paused on hover on . But it did not happen.I tried to use animation-fill-mode:forwards; but it did not worked.All the <div id="circle"> must be align in a straight line such that it resembles a straight block of sevral colors just like my first pictures which was my expectation. It occurs sometime only but not every time. I want it to occur every time as i hover the <div>. You can use javascript too. but this animation must work and all <div> must align in a straight line.

.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

Looks like someone produced a ton of unnecessary code =))

Regarding your question, you have to remove the animation at all, not pause it.
See the snippet below.

.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>