css3-12 transition+css或transform实现过渡动画
一、总结
一句话总结：首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1、哪些样式可以设置过渡动画？
transform加别的css
11 transition: width 2s, height 2s, transform 2s;
2、如何设置为hover里面的所有样式都执行过渡动画？
transition: all 1s ease 0s;
3、过渡动画如何实现？
首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1 div{
2 256px;
3 height:256px;
4 border:2px solid #999;
5 overflow:hidden;
6 transition:transform 2s;
7 }
8
9 div:hover{
10 transform:rotate(360deg);
11 }
二、transition+css或transform实现过渡动画
1、相关知识
不仅transform可以，其它css也可以
2、代码
1 div{ 2 width:256px; 3 height:256px; 4 border:2px solid #999; 5 overflow:hidden; 6 transition:transform 2s; 7 } 8 9 div:hover{ 10 transform:rotate(360deg); 11 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 background: red; 11 transition: width 2s, height 2s, transform 2s; 12 } 13 14 div:hover { 15 width: 200px; 16 height: 200px; 17 transform: rotate(180deg); 18 } 19 </style> 20 </head> 21 <body> 22 <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> 23 24 <div>鼠标移动到 div 元素上，查看过渡效果。</div> 25 </body> 26 </html>