相关疑难解决方法(0)

我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下.

但是,它一旦播放就会回到原来的状态.任何人都知道如何在最后一个css帧(100%)上停止它,或者如何摆脱它曾经玩过的整个div.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

我试图动画一个饼图,它从0度旋转到我希望它结束​​的任何程度(让我们说300度,无关紧要).有一个底层圆圈,一个在顶部旋转.就像现在一样,饼图旋转整整360度,然后以最终的度数位置结束(在这种情况下为300).现在它只适用于Chrome.

的jsfiddle

我的HTML:

<div class="spinner">
  <span><em></em></span>
  <span><em></em></span>
</div>

我的CSS:

.spinner {
  width: 250px;
  height: 250px;
  background: #aaa;
  margin: 0 auto;
  position: relative;
}
.spinner:after {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  border-radius: 100%;
  background: #fff;
  top: 10%;
  left: 10%;
}
.spinner span em {
  background: #0e728e;
  -webkit-animation-duration: 6s; 
}
@-webkit-keyframes rotate-rt {
  0%   { -webkit-transform: rotate(0deg); }
  25%  { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(180deg); }
}
@-webkit-keyframes rotate-lt {
  0%   { -webkit-transform: rotate(0deg); }
  25%  { …