css callback для webkit mozilla animation

Question

Я пытаюсь получить горизонтальный индикатор выполнения, для которого он начинается с полного и заканчивается пустым, чтобы имитировать 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 ... это странно. для «update» css selector выше, если я жестко кодирую каждый процент, то есть от 0% до 100%, это лучше, но тем не менее «темп» выглядит неправильно ... в любом случае я могу это исправить ??

Благодаря

Answer 1

Для проблемы # 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, вы хотите изменить transition function к linear; его defaults to ease:

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