标签定义及应用申明
应用@keyframes划定规矩,你能够建立动画。
建立动画是经由过程逐渐转变从一个CSS款式设定到另一个。
在动画过程当中,您能够变动CSS款式的设定屡次。
指定的变化时发作时应用%,或关键字"from"和"to",这是和0%到100%雷同。
0%是开首动画,100%是当动画完成。(引荐进修:CSS3视频教程。)
为了取得最好的浏览器支撑,您应当一直定义为0%和100%的选择器。
注重: 应用animation属性来掌握动画的表面,还应用选择器绑定动画。.
语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 |
申明 |
animationname |
必须的。定义animation的称号。 |
keyframes-selector |
必须的。动画持续时间的百分比。 正当值: 0-100% 注重: 您能够用一个动画keyframes-selectors。 |
css-styles |
必须的。一个或多个正当的CSS款式属性 |
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3</title> <style> div { width:100px; height:100px; background:blue; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% {top:0px; background:blue; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; background:blue; width:100px;} 100% {top:200px; background:yellow; width:300px;} } </style> </head> <body> <p><strong>注重:</strong> @keyframes 划定规矩不兼容 IE 9 以及更早版本的浏览器.</p> <div></div> </body> </html>
以上就是应用css3动画须要应用什么划定规矩的细致内容,更多请关注ki4网别的相干文章!