добавить задержанное время в анимации css3 - PullRequest
Новая
       1

добавить задержанное время в анимации css3

9 голосов
/ 21 ноября 2011

Я просто установил анимацию в div, и это удалось.Теперь я хочу, чтобы это было доказано, потому что его задержка слишком коротка!Итак, как я могу добавить задержку времени между анимацией (от 0% до 25%) и анимацией (от 25% до 50%) вот код: 

#flow{
      position:absolute;
      -webkit-animation:mymove 10s ease-in-out;
      -webkit-animation-iteration-count:3;
      -webkit-animation-delay:1s;
     }

@-webkit-keyframes mymove
    {
       0%{left:5px;}
       25%{left:127px;}
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }

всем! Спасибо за вниманиеЯ нашел ответ, но я не знаю API определения процента в ключевых кадрах! И если вы знаете об этом, просто помогите мне, большое спасибо! 

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   26%{left:127px;}
   27%{left:127px;}
   28%{left:127px;}
   29%{left:127px;}
   30%{left:127px;}
   31%{left:127px;}
   32%{left:127px;}
   33%{left:127px;}
   34%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }

Ответы [ 3 ]

9 голосов
/ 21 ноября 2011

Я не думаю, что вы можете задержать отдельные части анимации.Что вы можете сделать, это использовать две анимации и запустить их с задержкой. 

#flow{
      position:absolute;
      -webkit-animation:
          mymove_first 10s 0s 10 ease-in-out,
          mymove_second 10s 2s 10 ease-in-out;
     }

@-webkit-keyframes mymove_first
    {
       0%{left:5px;}
       25%{left:127px;}
     }

@-webkit-keyframes mymove_second
    {
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }
0 голосов
/ 19 августа 2014

Вы можете приостановить его, играя с процентами (следуя вашему примеру): 

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }

вам не нужно ставить все проценты от 25% до 35%, браузер их игнорирует.Вы перемещаетесь от 0 до 25% от пикселя 5 до 127, если ваша анимация составляет 10 секунд, это займет 2,5 секунды, затем приостановите 1 секунду между 25% и 35%, поскольку этот же пиксель не будет перемещаться, затем перейдите кследующая анимация для пикселя 249, это займет 1,5 секунды и так далее ...

надеюсь, это поможет!

0 голосов
/ 17 июня 2013

Я столкнулся с этой проблемой, насколько я могу найти, без jQuery вы не можете задерживать кадры.

Вы можете отложить начало анимации.Вы также можете заставить анимацию завершать то же состояние, что и исходный кадр.

Я использую среднее значение, которое позволяет выполнять несколько анимаций, например:

Ваш div: 

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

Запуск анимации 

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

Анимации: 

@-webkit-keyframes animation1 { 
0%  {-webkit-transform: translateY(-0px);}
50% {-webkit-transform: translateY(-150px);}
100% {-webkit-transform: translateY(-150px); 
        opacity:0;}
}       

@-webkit-keyframes animation2 { 
0%  {transform: translateY(-0px);}
100% {transform: translateY(-150px);}
}

Задерживая анимацию и используя прозрачность, вы можете сделать несколько вещей, если этого не произойдетпомогите заглянуть в jQuery

...