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、代码

         div{

             width:256px;

             height:256px;

             border:2px solid #999;

             overflow:hidden;

             transition:transform 2s;

         }

         div:hover{

             transform:rotate(360deg);

         }

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>菜鸟教程(runoob.com)</title>

 <style>

 div {

     width: 100px;

     height: 100px;

     background: red;

11     transition: width 2s, height 2s, transform 2s;

 }

 div:hover {

     width: 200px;

     height: 200px;

     transform: rotate(180deg);

 }

 </style>

 </head>

 <body>

 <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

 <div>鼠标移动到 div 元素上，查看过渡效果。</div>

 </body>

 </html>