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设置为alternate，并通过重复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>

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

1 个答案: