w3school css参考手册 飞龙整理 20141026

所需积分/C币:9 2014-10-26 22:08:51 3.33MB PDF
收藏 收藏
举报

w3school css参考手册 飞龙整理 20141026
值 描述 animationname 必需。定义动画的名称。 必需。动画时长的百分比。 合法的值 keyframes selector 0-100% from(与0%相同) to(与100%相同) CSS-styles 必需。一个或多个合法的CSs样式属性。 亲自试一试实例 实例1 在一个动画中添加多个 keyframe选择器 keyframes mymove 0% itop: 0px, J 25%{top:299px} 50%{top:19pX;} 75%{top:288px;} 100%(top: 0px; I @-moz-keyframes mymove / Firefox x %top: epx;) 25%{top:288px;} 50%{top:1pX;} 75%{top:299pX;} 100% itop: 0px;] @-Webkit-keyframes mymove / Safari H Chrome * 0% top: 0px;] %% top: 200px;) 59%{top:198px;} 75%{top:208px;} 198%{top:9pX;} @-0-keyframes mymove / Opera */ 0% top: 0px 25%{top:288px;} 50%{top:19pX;} 75%{top:28pX;} 100% itop: 0px;] 亲自试一试 实例2 在一个动画中改变多个CSS样式 @keyframes mymove 0% top: Opx; background: red; width: 100px;] 100%itop: 200px; background: yellow; width: 300px;] @-moz-keyframes my move / Firefox * 1% top: 0px; background: red; width: 100px; 100%itop: 200px; background: yellow; width: 300px @-webkit-keyframes mymove / Safari FA Chrome * 0% ftop: 0px; background: red; width: 100px;] 100%ftop: 200px; background: yellow; width: 300px; 1 @-0-keyframes mymove / Opera */ 0% top: epx; background: red; width: 100px; 100% itop: 200px; background: yellow; width: 300px; y 亲自试一试 实例 带有多个CSs样式的多个 keyframe选择器 @keyframes mymove 0% top: Opx; left: Opx; background: red; y 257 top: epx; left: 100px; background: blue; 50% itop: 100px, left: 100px; background: yellow; 75%top: 100px; left: 0px; background: green;] 100%(top: opx; left: 0px; background: red; @-moz-keyframes mymove/* Firefox 0%o top: opx; left: 0px; background: red; y 25% itop: Opx; left: 100px; background: blue;I 50%itop: 100px; left: 100px; background: yellow 75% top: 100px; left: 0px; background: green 100% top: 0px; left: 0px, background: red; y @-Webkit-keyframes mymove / Safari and Chrome % 0% top: epx; left: 0px; background: red 25% itop: 0px; left: 100px; background: blue, 50% Itop: 100px; left: 100px; background: yellow; y 757 top: 100px; left: epx; background: green 100% itop: 0px; left: 0px; background: red; y @-o-keyframes mymove /*Opera */ 0% top: 0px; left: 0px; background: red 25% top: 0px; left: 100px; background: blue 50% top: 100px, left: 100px, background: yellow;) 75%top: 100px; left: 0px; background: green; J 100% top: epx; left: epx; background: red;) 亲自试一试 相关页面 CSS3教程:CSS3动画 cSs3 animation属性 实例 使用简写属性,将动画与div元素绑定 animation: mymove 5s infinite webkit-animation: mymove 5s infinite;/* Safari FH Chrome 浏览器支持 E Firefox Chrome Safari Opera nternet Explorer10、 Firefox以及 Opera支持 animation属性。 Safari和 Chrome支持替代的 webkit- animation属性。 注释: nternet Explorer9以及更早的版本不支持 animation属性。 定义和用法 animation属性是一个简写属性,用于设置六个动画属性 animation-name animation-duration animation-timing-function animation-delay animation-iteration -count animation-direction 注释:请始终规定 animation- duration属性,否则时长为0,就不会播放动画了。 默认值: none o eased 1 normal 继承性: 版本 JavaScript语 法 object style animation= "mymove 5s infinite 语法 animation: name duration timing-function delay iteration-count direction 值 描述 animation-name 规定需要绑定到选择器的 keyframe名称。。 animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 animation-timing function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration- count 规定动画应该播放的次数 animation-direction 规定是否应该轮流反向播放动画。 相关页面 CSS3教程:CSS3动画 css3 animation-name属性 实例 为@ keyframes动画规定一个名称: div animation: my move Ss infinite webkit-animation: my move 5s infinite; / Safari FI Chrome *k 浏览器支持 IE Firefox Chrome Safari Opera nternet Explorer10、 Firefox以及 Opera支持 animation-name属性 Safari和 Chrome支持替代的- webkit- animation-name属性。 注释: nternet Explorer9以及更早的版本不支持 animation-name属性。 定义和用法 animation-name属性为@ keyframes动画规定名称。 注释:请始终规定 animation- duration属性,否则时长为O,就不会播放动画了。 默认值: none 继承性: no 版本: CSS3 Javascript诘 法 object style animation Name= "mymove 法 animation-name: keyframename none; 描述 keyframename规定需要绑定到选择器的 keyframe的名称。 none 规定无动画效果(可用于覆盖来自级联的动画) 相关页面 CSS3教程:CSS3动画 csS3 animation- duration属性 实例 为@ keyframes动画规定一个名称 d animation-duration: 2S; -webkit-animation- duration: 2s; / Safari Fu Chrome 浏览器支持 IE Firefox Chrome Safari Opera nternet Explorer10、 Firefox以及 Opera支持 animation- duration属性 Safari和 Chrome支持替代的- webkit-animation- duration属性 注释: Internet Explorer9以及更早的版本不支持 animation- duration属性。 定义和用法 animation- duration属性定义动画完成一个周期所需要的时闫,以秒或毫秒计。 默认值: 继承性: no 版本: JavaScript语 法 object style animation Duration=3s 语法 animation -duration time 值 描述 规定完成动画所花费的时间。默认值是0,意味着没有动画效 time 果 相关页面 CSS3教程:CSS3动画 csS3 animation-timing- function属性 实例 从开头到结尾以相同的速度米播放动画 d主V animation -timing-function: 2s Webkit-animation-timing-function: 2s; / Safari Fll Chrome * 浏览器支持 IE Firefox Chrome Safari Opera nternet Explorer10、 Firefox以及 Opera支持 animation- timing- function属性。 Safari和 Chrome支持替代的- webkit-animation-timing-function属性。 注释: Internet Explorer9以及更早的版本不支持 animation- -timing- function属性。 定义和用法 animation-timing- - function规定动画的速度曲线。 速度曲线定义动画从一套CSS样式变为另一套所用的时间。 速度曲线用于使变化更为平滑。 默认值: ease 继承性 no 版本 CSS3 JavaScript语 object style animation T imingFunction="linear 语法 animation-timing-function: value; animation-timing- function使用名为三次贝塞尔( Cubic bezier)函数的数学函数,米生成速度曲线。 您能够在该函数中使用自凵的值,也叮以预定义的值: 值 描述 测 试 linear 动画从头到尾的速度是相同的。 试 ease 默认。动画以低速开始,然后加快,在结束前变慢。 ease-In 动画以低速开始。 试 ease-out 动画以低速结束。 试 ease-in-out 动画以低速开始和结束。 试 cubIC- 在 cubic- bezier函数中自己的值。可能的值是从0到1 bezier(n, n, n, n) 的数值。 提示:请试着在下面的“亲自试一试”功能中使用不同的值。 亲自试一试-实例 实例1 为了更好地理解不同的定时函数值,这里提供了设置五个不同值的五个不同的d元素: /*W3C和 opera:*/ #div1 fanimation-timing-function: linear;y #div2 animation-timing-function: ease; y #div3 animation-timing-function: ease-in #div fanimation-timing-function: ease-out, y #divs fanimation-timing-function: ease-in-out; y / Firefox: * #divl i-moz-animation-timing-function: linear;] #div2 [-moz-animation-timing-function: ease; y #div3-moz-animation-timing-function: ease-in, #diva [-moz-animation-timing-function: ease-out; y

...展开详情
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
fuzeqi 整体来说 还不错。。
2018-06-09
回复
wu3280 整体来说 还不错。。用着也挺方便的。
2015-11-01
回复
jicemoon 整体来说 还不错。。用着也挺方便的。。。唯一的不足 就是排版有点坑。。。谢谢分享
2015-02-03
回复
壹灯大师 还不错,做成HTML格式,放在网上更上
2015-02-02
回复
a5524303 总体来说这份文档还是不错的。。 但是还是那句话,排版不太满意。。
2015-01-20
回复
  • GitHub

    绑定GitHub第三方账户获取
  • 脉脉勋章

    绑定脉脉第三方账户获得
  • 技术圈认证(专家版)

    博客专家完成年度认证,即可获得
  • 至尊王者

    成功上传501个资源即可获取
关注 私信 TA的资源
上传资源赚积分or赚钱
最新推荐