css参考手册_20141026

《css参考手册_20141026》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、W3SchoolCSS参考手册来源：www.w3school.com.cn整理：飞龙日期：2014.10.26CSS3动画属性（Animation）属性描述CSS@keyframes规定动画。3所有动画属性的简写属性，除了animation-play-animation3state属性。animation-name规定@keyframes动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。3animation-timing-规定动画的速度曲线。3functionanimation-delay规定动画何时开始。3an

2、imation-iteration-规定动画被播放的次数。3countanimation-direction规定动画是否在下一周期逆向地播放。3animation-play-state规定动画是否正在运行或暂停。3animation-fill-mode规定对象动画时间之外的状态。3CSS3@keyframes规则实例使div元素匀速向下移动：@keyframesmymove{from{top:0px;}to{top:200px;}}@-moz-keyframesmymove/*Firefox*/{from{top:0px;}to{top:200px;

3、}}@-webkit-keyframesmymove/*Safari和Chrome*/{from{top:0px;}to{top:200px;}}@-o-keyframesmymove/*Opera*/{from{top:0px;}to{top:200px;}}页面底部有更多实例。浏览器支持IEFirefoxChromeSafariOpera目前浏览器都不支持@keyframes规则。Firefox支持替代的@-moz-keyframes规则。Opera支持替代的@-o-keyframes规则。Safari和Chrome支持替代的@-webkit-k

4、eyframes规则。定义和用法通过@keyframes规则，您能够创建动画。创建动画的原理是，将一套CSS样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套CSS样式。以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义0%和100%选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。语法@keyframesanimationname{keyframes-selector{css-styles;}}值

5、描述animationname必需。定义动画的名称。必需。动画时长的百分比。合法的值：keyframes-selector0-100%from（与0%相同）to（与100%相同）css-styles必需。一个或多个合法的CSS样式属性。亲自试一试-实例实例1在一个动画中添加多个keyframe选择器：@keyframesmymove{0%{top:0px;}25%{top:200px;}50%{top:100px;}75%{top:200px;}100%{top:0px;}}@-moz-keyframesmymove/*Firefox*/{0%{to

6、p:0px;}25%{top:200px;}50%{top:100px;}75%{top:200px;}100%{top:0px;}}@-webkit-keyframesmymove/*Safari和Chrome*/{0%{top:0px;}25%{top:200px;}50%{top:100px;}75%{top:200px;}100%{top:0px;}}@-o-keyframesmymove/*Opera*/{0%{top:0px;}25%{top:200px;}50%{top:100px;}75%{top:200px;}100%{top:0p

7、x;}}亲自试一试实例2在一个动画中改变多个CSS样式：@keyframesmymove{0%{top:0px;background:red;width:100px;}100%{top:200px;background:yellow;width:300px;}}@-moz-keyframesmymove/*Firefox*/{0%{top:0px;background:red;width:100px;}100%{top:200px;background:yellow;width:300px;}}@-webkit-keyframesmymove/*Sa

8、fari和Chrome*/{0%{top:0px;background:red;width:100px;}1