在多次迭代之间的1次迭代后暂停CSS3动画

为了使用CSS3制作一个看起来不错的下拉菜单，我使用动画设计了一个下拉菜单。我使用动画而不是过渡，以便能够更好地控制下降的时间。我觉得这在美学上更令人愉悦。但是，在使用动画过渡时确实会遇到问题，因为反向过程更难设置动画。我想知道是否有一种方法，在使用菜单时有效地暂停动画，使其反向动画，就像在过渡中一样

以下是CSS现在的样子：

@-webkit-keyframes s-menu-down /*Safari and Chrome */ {
0%   { width: 100%; height: 0px;}
100% { width: 180px; height: 27px;}
}

@-moz-keyframes s-menu-down /*Firefox */ {
    0%   { width: 100%; height: 0px;}
    100% { width: 180px; height: 27px;}
}

@keyframes s-menu-down {
    0%   { width: 100%; height: 0px;}
    100% { width: 180px; height: 27px;}
}

@-webkit-keyframes s-menu-down-text /*Safari and Chrome */ {
    0%   { color: rgba(84, 83, 81, .0); text-shadow: none;}
    100% { color: rgba(84, 83, 81, 1.0); text-shadow: rgba(238, 238, 238, 1.0);}
}

@-moz-keyframes s-menu-down-text /*Firefox */ {
    0%   { color: rgba(84, 83, 81, .0); text-shadow: none;}
    100% { color: rgba(84, 83, 81, 1.0); text-shadow: rgba(238, 238, 238, 1.0);}
}

@keyframes s-menu-down-text {
    0%   { color: rgba(84, 83, 81, .0); text-shadow: none;}
    100% { color: rgba(84, 83, 81, 1.0); text-shadow: rgba(238, 238, 238, 1.0);}
}

ul#secondary li:hover > ul li {
    -webkit-animation: s-menu-down .5s linear 0 2 alternate;
    -moz-animation: s-menu-down .5s linear 0 2 alternate;
    animation: s-menu-down .5s linear 0 2 alternate;
}

ul#secondary li:hover > ul li a {
    -webkit-animation: s-menu-down-text .5s linear 0 2 alternate;
    -moz-animation: s-menu-down-text .5s linear 0 2 alternate;
    animation: s-menu-down-text .5s linear 0 2 alternate;
}

---

通过将CSS设置为alternate，并设置repeat 2，我可以使菜单同时上下移动。我正在寻找某种javascript解决方案，或者其他类似的解决方案，以便在迭代之间暂停以允许菜单使用。

我还尝试在多次迭代之间暂停动画。现在，我找到的唯一解决方案是使用jquery代码删除/添加带有动画描述的CSS类。jquery代码依赖于动画时间，这并不理想，但我不是jquery大师：-）

HTML:

jQuery：

<script type="text/javascript">
        $("#animateTest").mouseenter(function () {
            $("#animateTable").removeClass("table90deg");
            $("#animateTable").addClass("tablein");

            $("#animateTable").delay(2000).queue(
            function () {
                $("#animateTable").removeClass("tablein");
                $("#animateTable").dequeue();
            });
        });

        $("#animateTest").mouseleave(function () {
            $("#animateTable").addClass("tableout");
            $("#animateTable").delay(2000).queue(
            function () {
                $("#animateTable").removeClass("tableout");
                $("#animateTable").addClass("table90deg");
                $("#animateTable").dequeue();
            });

        });
</script>

$（“#animateTest”）.mouseenter（函数（）{
$（“#animateTable”）.removeClass（“table90deg”）；
$（“#animateTable”）.addClass（“tablein”）；
$（“#animateTable”）.delay（2000）.队列(
函数（）{
$（“#animateTable”）.removeClass（“tablein”）；
$（“#animateTable”）.dequeue（）；
});
});
$（“#animateTest”）.mouseleave（函数（）{
$（“#animateTable”）.addClass（“tableout”）；
$（“#animateTable”）.delay（2000）.队列(
函数（）{
$（“#animateTable”）.removeClass（“tableout”）；
$（“#animateTable”）.addClass（“table90deg”）；
$（“#animateTable”）.dequeue（）；
});
});

@-webkit-keyframes animationIn
{
    0%   {-webkit-transform: rotateY(90deg);}
    25%  {-webkit-transform: rotateY(75deg);}
    50%  {-webkit-transform: rotateY(50deg);}
    75%  {-webkit-transform: rotateY(25deg);}
    100% {-webkit-transform: rotateY(0deg);}
}

@-webkit-keyframes animationOut 
{
    0%   {-webkit-transform: rotateY(0deg);}
    25%  {-webkit-transform: rotateY(25deg);}
    50%  {-webkit-transform: rotateY(50deg);}
    75%  {-webkit-transform: rotateY(75deg);}
    100% {-webkit-transform: rotateY(90deg);}
}


.table90deg
{
    -webkit-transform: rotateY(90deg); 
}  

.tablein
{
    -webkit-animation-name: animationIn;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

.tableout
{
    -webkit-animation-name: animationOut;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

<script type="text/javascript">
        $("#animateTest").mouseenter(function () {
            $("#animateTable").removeClass("table90deg");
            $("#animateTable").addClass("tablein");

            $("#animateTable").delay(2000).queue(
            function () {
                $("#animateTable").removeClass("tablein");
                $("#animateTable").dequeue();
            });
        });

        $("#animateTest").mouseleave(function () {
            $("#animateTable").addClass("tableout");
            $("#animateTable").delay(2000).queue(
            function () {
                $("#animateTable").removeClass("tableout");
                $("#animateTable").addClass("table90deg");
                $("#animateTable").dequeue();
            });

        });
</script>