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

Question

为了使用 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 设置为交替，并通过重复 2，我可以使菜单上下移动。我正在寻找某种 javascript 解决方案或其他类似的解决方案，以在迭代之间暂停以允许使用菜单。

Answer 1

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

HTML:

<div id="animateTest" style="height: 500px; width: 500px; background-color: Orange;">
    <table id="animateTable" class="table90deg" style="border: 2px solid Gray; border-radius: 25px;">
        <tr>
            <th>
                Jméno
            </th>
            <th>
                Příjmení
            </th>
            <th>
                Telefon
            </th>
            <th>
                Adresa
            </th>
        </tr>
   </table>

CSS:

@-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;
}

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>