如何用js控制css中的帧动画？ 使我的动画每点击一次运行一次？

#top{

    z-index: 100;
-webkit-animation: fly 8s ; /* Chrome, Safari, Opera */
    animation: fly 8s ;
-webkit-animation-direction:normal;

}


@-webkit-keyframes fly {
    0%{
        opacity: 1;
        width: 150px;
        height: 150px;
        position: absolute;
        top: -10px;
        left: -200px;
    }
    100%{
        opacity: 0;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 130px;
        left: 640px;

    }
}

`以上是我目前的css代码 谢谢！

这个用css实现有些问题。毕竟点击事件需要用js实现触发。不建议使用css的方式去做。参考jquery的animate
http://www.runoob.com/jquery/jquery-animate.html