动画后旋转效果不起作用

Question

我想将鼠标悬停在外圈上时旋转内圈，如果我不动画动画，它的效果会很好。但是如果我应用动画，内圈在悬停时不会旋转。我的动画只使内圈旋转一次。

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

从forwards移除属性animation-fill-mode，然后它可以正常工作，如下所示。

  

动画填充模式：前进 - 动画结束后，   动画将在动画结束时应用属性值。

使用360deg时，此处动画结束于forwards。

更新 -

在您的情况下，您需要forwards仅使用fade-in span tag，即opacity 0 to 1，因此您可以声明two different animation。

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为问题在于你的动画属性。我编辑了它并且工作正常。我添加了下面的代码段。

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>