欢迎来到天天文库
浏览记录
ID:32299432
大小:3.33 MB
页数:359页
时间:2019-02-02
《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
此文档下载收益归作者所有