Rotating effect not working after animation - html

Question

I want to rotate the inner circle when hover over outer circle, its works fine if I don't apply animation to it. But if I apply animation, inner circle does not rotate on hover. My animation makes inner circle rotate once only.
body, html {
height: 100%;
}
.main-content {
position: relative;
height: 100%;
}
.box-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box-container ul {
list-style: none;
}
.box-container .box {
display: inline-block;
height: 100px;
width: 100px;
background: pink;
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
}
.box-container .box span {
transform-origin: 0% 0%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -20px;
margin-left: -20px;
display: block;
width: 40px;
height: 40px;
background: #58C9B9;
color: #fff;
line-height: 40px;
text-align: center;
transform-origin: calc(100% - 20px) calc(100% - 20px);
}
.box-container .box:hover span {
background: #4F86C6;
transform: rotateY(360deg);
transition: .5s;
}
.animate1 {
animation: animate .5s ease-in-out forwards;
}
.animate2 {
animation: animate .5s ease-in-out .5s forwards;
}
.animate3 {
animation: animate .5s ease-in-out 1.0s forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(0deg);
}
100% {
opacity: 1;
transform: rotateY(360deg);
}
}
<div class="main-content">
<div class="box-container">
<ul class="list-unstyle list-inline">
<li class="box "><span class="animate1">20%</span></li>
<li class="box "><span class="animate2">40%</span></li>
<li class="box "><span class="animate3">50%</span></li>
</ul>
</div>
</div>
<div>

Answer 1

Remove property forwards from animation-fill-mode and then it works fine, as below.
animation-fill-mode:forwards - After the animation ends,
the animation will apply the property values for the time the animation ended.
Over-here animation ends at 360deg when using forwards.
Update -
And in your case you need to use forwards just to fade-in span tag i.e. from opacity 0 to 1, so for that you can declare two different animation.
body, html {
height: 100%;
}
.main-content {
position: relative;
height: 100%;
}
.box-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box-container ul {
list-style: none;
}
.box-container .box {
display: inline-block;
height: 100px;
width: 100px;
background: pink;
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
}
.box-container .box span {
transform-origin: 0% 0%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -20px;
margin-left: -20px;
display: block;
width: 40px;
height: 40px;
background: #58C9B9;
color: #fff;
line-height: 40px;
text-align: center;
transform-origin: calc(100% - 20px) calc(100% - 20px);
opacity:0;
transform:rotate(0deg);
}
li:nth-child(1):hover > .animate1{
transition:.5s ease;
transform:rotateY(360deg);
}
li:nth-child(2):hover > .animate2{
transition:.5s ease;
transform:rotateY(360deg);
}
li:nth-child(3):hover > .animate3{
transition:.5s ease;
transform:rotateY(360deg);
}
.animate1{
animation: animate .5s ease-in-out, opty .5s ease-in-out forwards;
}
.animate2 {
animation: animate .5s ease-in-out .5s, opty .5s ease-in-out forwards .5s;
}
.animate3 {
animation: animate .5s ease-in-out 1.0s, opty .5s ease-in-out forwards 1s;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(0deg);
}
100% {
opacity: 1;
transform: rotateY(360deg);
}
}
#keyframes opty {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="main-content">
<div class="box-container">
<ul class="list-unstyle list-inline">
<li class="box "><span class="animate1">20%</span></li>
<li class="box "><span class="animate2">40%</span></li>
<li class="box "><span class="animate3">50%</span></li>
</ul>
</div>
</div>
<div>

Answer 2

I think the problem is with your animation property .I'm edited it and it's working fine.I'm added the snippet below.
body, html {
height: 100%;
}
.main-content {
position: relative;
height: 100%;
}
.box-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box-container ul {
list-style: none;
}
.box-container .box {
display: inline-block;
height: 100px;
width: 100px;
background: pink;
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
}
.box-container .box span {
transform-origin: 0% 0%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -20px;
margin-left: -20px;
display: block;
width: 40px;
height: 40px;
background: #58C9B9;
color: #fff;
line-height: 40px;
text-align: center;
transform-origin: calc(100% - 20px) calc(100% - 20px);
}
.box-container .box:hover span {
background: #4F86C6;
transform: rotateY(360deg);
transition: .5s;
}
.animate1 {
animation: animate .5s ease-in-out 1;
}
.animate2 {
animation: animate .5s ease-in-out .5s;
}
.animate3 {
animation: animate .5s ease-in-out 1s;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(0deg);
}
100% {
opacity: 1;
transform: rotateY(360deg);
}
}
<div class="main-content">
<div class="box-container">
<ul class="list-unstyle list-inline">
<li class="box "><span class="animate1">20%</span></li>
<li class="box "><span class="animate2">40%</span></li>
<li class="box "><span class="animate3">50%</span></li>
</ul>
</div>
</div>
<div>