웹킷 모질라 애니메이션을위한 CSS 콜백

Question

가로 진행 막대를 사용하려고하는데, 전체 진행으로 시작하여 30 초 타이머를 시뮬레이트하기 위해 비어 있습니다. 즉 0시 30 분에 0시 29 분에 진행률 표시 줄이 꽉 차면 진행률 막대가 비례하여 줄어야합니다. 그래서 기본적으로 이것이 당신이 답을 알고 있다면 난이 방법으로

.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%;} 
} 

두 가지 문제가 무엇

처리 애니메이션은 고통이다, 그래서 내가 모질라는

을 지원하는 CSS 3 애니메이션을 사용하기로 결정 그 중 하나에, 실제로 (0시 반에서 0:00) 카운트 다운 숫자 카운터가

1. 회신 주시기 바랍니다, 그것은과 동기화하도록되어 Css 애니메이션 진행률 표시 줄 위에 붙여 넣기 ...하지만 진도 표시 줄은 실제 애니메이션 시작 (한 번 표시) 전에 숫자 카운터 (javascript를 통해), 내가 애니메이션을 시작할 때 말할 수있는 것과 같은 것을 가지고 있습니까?

2. 비록 애니메이션의 지속 시간이 30 초로 설정되어 있지만 ... '템포'가 이상하게 보입니다. 애니메이션이 빠르게 시작되고 느려지므로 .... 수치 타이머 (즉> 15) 왼쪽 절반 이상을 가지고 있지만 진행률 막대가 이미 절반 이하가되었습니다 .... 결국에는 0시에 애니메이션이 끝납니다 ... 이상합니다. 위의 '업데이트'CSS 선택기의 경우, 모든 비율을 0 % ~ 100 %로 하드 코딩하면 더 좋지만 '템포'가 올바르게 표시되지 않습니다 ... 어쨌든이 문제를 해결할 수 있습니까 ??

감사

문제 # 1

Answer 1

,이 같은 일을 할 것입니다 : 문제 # 2의

.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"); 

, 당신은 transition functionlinear에 변경하기를 원할 것입니다; 그것 defaults to ease :

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