小编use*_*192的帖子

我有一个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); }
}

我真的卡住了.我想要一个我创建的CSS动画(下面)来点击一个div激活.我认为我能做到的唯一方法是使用javascript创建onClick事件.但是我不知道如何运行/参考我的css文件中的动画.谁能帮我？

这是我想通过单击div运行的css文件中的动画.

@-webkit-keyframes colorchange {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

我甚至尝试将css放在与javascript(index.html)相同的文件中,并使用以下代码尝试在点击时激活它,但没有运气.

<script>
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange ';
}
</script>

请帮忙 :)