CSS动画
文档分值:9
css >>> css >>> CSS动画
课程目录
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
规定动画的名称 规定动画的时长
div { animation: ani 5s; }
注释:必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
动画是使元素从一种样式逐渐变化为另一种样式的效果。在时长内可以改变任意多的样式任意多的次数,用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。
@keyframes ani { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
div { animation: ani 5s; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; }
注意:Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。
[ 该条目创建时间:2016-07-09 20:20:06 ]