小白教程
所有教程
关于
Search
172.69.58.224
172.69.58.224
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr animation keyframes”的源代码
本页内容
下一节:
Css3_pr_animation
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 @keyframes}}[[Category:css reference|30]] = CSS3 @keyframes 规则 = 使一个div元素逐渐移动200像素: <sample title="" desc="" lang="html" hererun="1"> @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意:</strong> @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p> <div></div> </body> </html> </run> 在此页底部有更多的例子。 == 浏览器支持 == {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | @keyframes | 43.04.0 -webkit- | 10.0 | 16.05.0 -moz- | 9.04.0 -webkit- | 30.015.0 -webkit-12.0 -o- |} == 标签定义及使用说明 == 使用@keyframes规则,你可以创建动画。 创建动画是通过逐步改变从一个CSS样式设定到另一个。 在动画过程中,您可以更改CSS样式的设定多次。 指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。 0%是开头动画,100%是当动画完成。 为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。 '''注意:''' 使用animation属性来控制动画的外观,还使用选择器绑定动画。. == 语法 == <pre> @keyframes animationname {keyframes-selector {css-styles;}}</pre> {| class="table table-striped table-hover" !width="50%"| 值 !width="50%"| 说明 |- | animationname | 必需的。定义animation的名称。 |- | keyframes-selector | 必需的。动画持续时间的百分比。 合法值: 0-100% from (和0%相同) to (和100%相同) '''注意:''' 您可以用一个动画keyframes-selectors。 |- | css-styles | 必需的。一个或多个合法的CSS样式属性 |} == 在线实例 == 许多关键帧选择器中添加一个动画: <sample title="" desc="" lang="html" hererun="1"> @keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } </style> </head> <body> <p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p> <div></div> </body> </html> </run> Change many CSS styles in one animation: <sample title="" desc="" lang="html" hererun="1"> @keyframes mymove { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } </style> </head> <body> <p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p> <div></div> </body> </html> </run> Many keyframe selectors with many CSS styles: <sample title="" desc="" lang="html" hererun="1"> @keyframes mymove { 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;} 100% {top:0px; left:0px; background:red;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 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;} 100% {top:0px; left:0px; background:red;} } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 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;} 100% {top:0px; left:0px; background:red;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 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;} 100% {top:0px; left:0px; background:red;} } </style> </head> <body> <p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p> <div></div> </body> </html> </run> == 相关文章 == CSS3 tutorial: [[css3 animations|CSS3 动画]]
返回至“
Css3 pr animation keyframes
”。
下一节:
Css3_pr_animation