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             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 }

 

 

二、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  2  3  4 
       5  6 20 21 22 
注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。
23 24 
     
      鼠标移动到 div 元素上，查看过渡效果。
     
25 26