Приостановка анимации CSS3 после 1 итерации между несколькими итерациями - PullRequest
Новая
       14

Приостановка анимации CSS3 после 1 итерации между несколькими итерациями

0 голосов
/ 08 августа 2011

В надежде создать выпадающее меню, которое будет хорошо выглядеть с использованием 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 или что-то еще, чтобы сделать паузу между итерациями, чтобы меню использовалось.

1 Ответ

1 голос
/ 09 ноября 2011

Я также пытаюсь приостановить анимацию между несколькими итерациями. Прямо сейчас, единственное решение, которое я нашел, - это использование кода 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>
...