アニメーション後に回転エフェクトが機能しない

Question

アニメーションを適用しないと、内側サークルを外側円の上に移動したときに内側サークルを回転させたいと思っています。しかし、アニメーションを適用すると、内円はホバーで回転しません。私のアニメーションでは、内側円が一回だけ回転します。

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

animation-fill-modeからプロパティforwardsを削除し、それは以下のように、正常に動作します。

アニメーション塗りつぶしモード：転送 - アニメーションが終了した後、 アニメーションは、アニメーションが終了した時間のプロパティ値を適用します。

ここでの上映アニメーションは、forwardsを使用すると360degで終了します。

アップデート -

そして、あなたの場合には、あなたがtwo different animationを宣言することができるためので、opacity 0 to 1からわずかfade-in span tagすなわちにforwardsを使用する必要があります。

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'mであると思いfine.I'mは以下のスニペットを追加、それを編集し、それが働いています。それを解決する方法

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>