css обратный вызов для анимации webkit mozilla - PullRequest
Новая
       25

css обратный вызов для анимации webkit mozilla

0 голосов
/ 20 марта 2012

Я пытаюсь получить горизонтальный индикатор выполнения, для которого он начинается с полного и заканчивается пустым, чтобы имитировать 30-секундный таймер. то есть в 0:30 индикатор выполнения заполнен, в 0:29 индикатор выполнения должен пропорционально уменьшаться.

обработка анимации - это боль, поэтому я решил использовать анимацию css 3, которую поддерживает mozilla

так что в основном это то, что у меня есть 

 .progress-bar {
    height: 8px;
    width: 0;
    background: -moz-linear-gradient(top,  #00679A 0%, #FFFFFF 30%, #00679A 100%);
    margin: 0px 4px;
    -moz-animation-duration: 30s;  
    -moz-animation-name: update;      
  }

 @-moz-keyframes update {
   0% {width: 100%;} 
   50% {width: 50%;}
   100% {width: 0%;}
 }

две проблемы с этим подходом, если вы знаете ответ на любой из них, пожалуйста, не стесняйтесь ответить

  1. на самом деле числовой счетчик ведет обратный отсчет (с 0:30 до 0:00), он должен синхронизироваться с индикатором прогресса анимации CSS, вставленным выше ... но индикатор выполнения фактически начинает анимацию ( как показано на рисунке) перед числовым счетчиком (через javascript), есть ли у mozilla что-то вроде того, что я могу сказать, когда начинать анимацию?

  2. хотя длительность анимации установлена ​​на 30 секунд ... но «темп» выглядит странно, он начинает анимироваться быстро, а затем медленно… и это не имеет смысла, потому что числовой таймер показывает, что у вас осталось больше половины времени (то есть> 15), но затем индикатор выполнения уже меньше половины пропал .... в конце он все же заканчивает анимацию в момент времени 0 ... это странно. для селектора css «update» выше, если я жестко кодирую каждый процент, то есть от 0% до 100%, это лучше, но все же «темп» не выглядит правильным ... в любом случае, я могу это исправить ??

Спасибо

1 Ответ

1 голос
/ 20 марта 2012

Для задачи # 1 вы захотите сделать что-то вроде этого: 

.progress-bar {
  height: 8px;
  width: 0;
  background: -moz-linear-gradient(top,  #00679A 0%, #FFFFFF 30%, #00679A 100%);
  margin: 0px 4px;
}

.start-animating {
  -moz-animation-duration: 30s;  
  -moz-animation-name: update;      
}

// When you're ready
$(".progress-bar").addClass("start-animating");

Для проблемы # 2 вам нужно изменить функцию перехода на linear; по умолчанию равно ease: 

.start-animating {
  -moz-animation-duration: 30s;  
  -moz-animation-name: update;
  -moz-animation-timing-function: linear;
}
...