HTML5进度条元素的CSS3过渡
Posted
技术标签:
【中文标题】HTML5进度条元素的CSS3过渡【英文标题】:CSS3 Transition of HTML5 progress bar element 【发布时间】:2014-08-16 00:04:22 【问题描述】:我正在使用此处描述的进度条:
http://css-tricks.com/html5-progress-element/
使用<progress>
元素并使用伪类对其进行样式设置
-webkit-progress-bar
和 -webkit-progress-value
。
所以现在我想在progress-value
更新时为其设置动画。
在我的理论中,这应该通过像这样转换它的 CSS 宽度属性来工作:
progress::-webkit-progress-value
transition: 5s width;
但由于某种原因,这似乎不起作用。
【问题讨论】:
你有想过这个吗? 【参考方案1】:transition property 的正确语法是:
transition: [property] [duration] [timing-function] [delay];
那么你的值(transition: 5s width;
)是错误的,时间和属性是倒置的,并且缺少计时功能。它应该是(例如):
transition : width 5s ease;
它也应该作为跨浏览器工作的前缀,特别是对于基于 WebKit 的浏览器,将标准属性保留为最后一个。
-webkit-transition : width 5s ease;
-moz-transition : width 5s ease;
-o-transition : width 5s ease;
transition : width 5s ease;
【讨论】:
以上是关于HTML5进度条元素的CSS3过渡的主要内容,如果未能解决你的问题,请参考以下文章