javascript - webkit mozilla 动画的 css 回调

Question

我正在尝试制作一个水平进度条，它从满开始到空结束以模拟 30 秒计时器。 也就是说，在时间0:30，进度条满了，在0:29，进度条应该按比例减少。

处理动画很痛苦，所以我决定使用mozilla支持的css 3动画

基本上这就是我所拥有的

 .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 选择器，如果我对每个百分比进行硬编码，即从 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为线性；它defaults to ease :

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