在jQuery / Javascript时间延迟上重新触发Css3关键帧动画

Question

这一直困扰着我一段时间，任何帮助都会非常感激！

我一直在使用css3关键帧动画，我遇到了一个问题，我试图让我的动画元素在定时延迟后重新触发，所有其他问题都在询问和接收类似的{ {1}}触发器。

onclick是一个很好的例子，它将如何在延迟时间内完成

文件

http://codepen.io/stoikerty/pen/mBAcs

文件上的Div元素

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

动画设置：

<div id="bannerImg" class="banner-RunAnimation"></div>

动画关键帧

.banner-RunAnimation{-webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out, bannerImg-animation2 5s 5s 1 ease-out forwards;}

脚本：

@-webkit-keyframes bannerImg-animation1
   { 
0%  {-webkit-transform: scale(.3);
      opacity:0;
    }
50% {-webkit-transform: scale(1.05);
      opacity:1;
    }
70% {-webkit-transform: scale(.9);
    }
100% { -webkit-transform: scale(1);
    }
    }

@-webkit-keyframes bannerImg-animation2 
   { 
    0%  {-webkit-transform: translateY(-0px);
        }
    50% {-webkit-transform: translateY(-150px);
        opacity:1;
        }
    75% { opacity:0.8;
        }
    100% {-webkit-transform: translateY(-150px); 
        opacity:0;
        }
     }