css3动画的复习
css3动画属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style> div{ width:100px; height:100px; background:red; position:relative; animation-name:myfirst; //动画名字,对应下面的@keyframe animation-duration:5s; //动画完成一个周期的时间 animation-timing-function:linear; //动画的曲线 animation-delay:2s; // 动画开始时间,默认为0 animation-iteration-count:infinite; //动画的播放次数,默认为1 animation-direction:alternate; //动画 逆向播放,默认为normal,则不逆向播放 animation-play-state:running; //动画的运行和停止:paused /* Safari and Chrome: */ /*-webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running;*/ } @keyframes myfirst { 0% {background-color: red;left: 0;top: 0} 25% {background-color: yellow;left: 200px;top:0;} 50% {background-color: blue;left: 200px;top: 200px} 75% {background-color: green;left: 0;top: 200px} 100% {background-color: red;left: 0;top: 0} } </style> </head> <body> <p><b>注意</b>该动画在ie9以及更早版本是无效的</p> <div></div> </body> </html>
可以直接赋值代码在浏览器中查看效果。
与上面的动画相同,但是使用了简写的动画 animation 属性:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation:myfirst 5s linear 2s infinite alternate; /* Safari and Chrome: */ -webkit-animation:myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation:myfirst 5s linear 2s infinite alternate; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p> <div></div> </body> </html>
css3过渡动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 2s, transform 2s; } div:hover { width: 200px; height: 200px; -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); } </style> </head> <body> <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> <div>鼠标移动到 div 元素上,查看过渡效果。</div> </body> </html>