webkit mozilla动画的css回调
webkit mozilla动画的css回调
提问于 2012-03-19 19:46:35
我正在尝试有一个水平进度条，它以满开始，结束为空以模拟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%;}
}这个方法有两个问题，如果你知道其中任何一个问题的答案，请不要犹豫地回答
- 实际上有一个数字计数器向下计数(从0:30到0:00)，它应该与粘贴above...but的css动画进度条同步。进度条在数字计数器1之前(通过javascript)实际上开始动画(一旦显示)，mozilla有什么东西可以告诉它什么时候开始动画吗？
- 虽然动画的持续时间设置为30 seconds...but‘节奏’看起来很奇怪，但它开始快速动画，然后slow....and这是没有意义的，因为数字计时器显示你有超过一半的时间(即> 15)，但进度条已经不到一半gone....at，结束它仍然完成动画时间0...it是奇怪的。对于上面的“更新”css选择器，如果我硬编码每一个百分比--即从0%到100% --这更好，但是'tempo‘看起来不像correct...anyway，我可以修复这个问题吗？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-03-19 21:58:50
对于问题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；it ease
.start-animating {
-moz-animation-duration: 30s;
-moz-animation-name: update;
-moz-animation-timing-function: linear;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9781086
复制
相似问题
在尝试登录时获取(405)方法不允许错误
错误405 (在发出Ajax请求时不允许方法)
当尝试使用ngrok作为松弛请求URL时，"Error 405方法不允许“
角度7:发送post请求导致错误405 (方法不允许)
尝试POST AJAX请求时的post 405 (方法不允许)- Laravel 4
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
