首页 > > 网页制作 > css >

CSS3动画效果transition

2019-01-01 23:17:15来源：博客园阅读 ()

1.transition的浏览器支持情况

IE10+支持，IE6\7\8\9都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀 -webkit- 之类的了

2. 还是一步一步说说怎么用transition吧

页面只有一个div，其css如下：

 1         <style type="text/css">
 2             div {
 3                 width:100px;
 4                 height:30px;
 5                 background-color:#FF9900;
 6             }
 7             div:hover {
 8                 width: 300px;
 9             }
10         </style>

鼠标移动到div上，div立刻变宽为300px，效果如下：

现在在div身上加上 transition:0.5s;

 1         <style type="text/css">
 2             div {
 3                 width:100px;
 4                 height:30px;
 5                 background-color:#FF9900;
 6                 /* 加上这个，让变化慢一点 */
 7                 transition: 0.5s;
 8             }
 9             div:hover {
10                 width: 300px;
11             }
12         </style>

效果如下：

原来是瞬间，现在div的css样式中加入了transition属性，变成了缓慢的动画了。那么问题来了，如下：

3.transition写在哪？

继续上面的案例，我们写在div上，就是告诉div，以后变化将会有过渡，为什么不是加在div:hover中？

将div里的transition:0.5s删掉，放在div:hover中，（css代码略）效果如下

鼠标放在上面，效果还好，慢慢伸长，鼠标一松，立刻变短，没有过渡效果。为什么？

因为div:hover状态时，有这个transition属性，而div由短变长中，给个过渡，就有动画。当鼠标离开div，不是hover状态了，div没有transition属性，所以，立刻变短。

既然是变化，那就至少涉及到两个状态，变化前的状态，变化后的状态。两个状态不一样，然后给予慢镜头过渡。就形成了动画。

也就是说：你想让谁的变化具有动态过渡的效果，那transition属性就加在谁身上，还要加的让变化前后两个状态，都能有transition属性（要知道，div:hover时，也可有获取到div中的属性，反过来就不行了）。

在这里，变化前是div，变化后div:hover，两个显示出来不同。鼠标移动触发的动画效果。那么这就有个问题了，如下：

4.怎么触发transition动画？

上面知道，变化前div {...} ，变化后 div:hover {...} 。其中:hover状态就是鼠标移动过去触发的。这种就是通过伪类触发。

伪类触发比如 :hover : focus :checked :active，有了这些伪类，就有了“状态”，有了状态，就有了不同，有了不同，就有了过渡动画。

还可以通过js触发，比如说：js控制div增加个class为donghua，那么，页面中该div增加个class，其属性要变，如果设置过transition，那就会有动画效果。这么理解吧：浏览器发现该div变成div.donghua了，而且发现形状大小色彩等前后不一样了，给前后状态变化的过程来个慢镜头，就形成了动画。

 1     <!-- 并不会有动画，而是直接显示宽度300px（如果是js操作，增加的donghua这个class就可以） -->
 2         <style type="text/css">
 3             div {
 4                 height:30px;
 5                 background-color:#FF9900;
 6                 
 7                 width:100px;
 8                 transition: 0.5s;
 9             }
10             div.donghua {
11                 width: 300px;
12             }
13         </style>
14 ...
15 
16         <div class="donghua">
17             
18         </div>

上面的并不会有动画效果，因为页面显示出来的时候，就已经有了class="donghua" ，覆盖了原来100px的定义，直接显示宽度为300px了。下面个例子演示js控制，导致的变化，有了变化，也就有了动画。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             p {
 8                 height:30px;
 9                 background-color:#FF9900;
10                 
11                 width:100px;
12                 transition: 0.5s;
13             }
14             div.donghua p{
15                 width: 300px;
16             }
17         </style>
18     </head>
19     <body>
20         <div>
21             <p>看我的变化</p>
22         </div>
23         <script type="text/javascript">
24             window.onload = function(){
25                 document.body.children[0].onclick = function(){
26                     if(this.className == 'donghua'){
27                         this.className = '';
28                     }else{
29                         this.className = 'donghua';
30                     }                
31                 }
32             }
33         </script>
34         <!-- 
35         这个例子还想说明的是：<p>是变化的部分，transition加在p身上，
36         但是触发变化不一定是p多个class，或者在hover状态 ，可能因为父级多个class什么的（或其他原因），也会导致变化
37         总之，有变化，就有过渡动画。管它是什么导致的呢！
38         -->
39     </body>
40 </html>

效果如下：

知道动画怎么触发的了，下面就要讲讲transition的具体参数了

5.transition都有哪些参数？默认是什么？可以怎么写？

transition是这四个属性的复合样式

属性名	描述
transition-property	指定CSS属性的name，transition效果（元素上的什么css属性变化，默认是all，上面例子就是div的width变化，设置为none则无变化）
transition-duration	transition效果需要指定多少秒或毫秒才能完成（可以是1s、0.5s、200ms，默认0）
transition-timing-function	指定transition效果的转速曲线（匀速呢？还是先快后慢，或是先慢后快，等等...默认ease）
transition-delay	定义transition效果开始的时候（等多久开始，默认0）

transition: property duration timing-function delay;

默认all 0 ease 0

先讲讲transition-property，举例：

 1         div {
 2             width:100px;
 3             height:30px;
 4             background-color:#FF9900;
 5             transition: 1s;
 6         }
 7         div:hover {
 8             width: 300px;
 9             height: 90px;
10             background-color: green;
11         }

页面只有一个div标签，动画效果如下，鼠标移上去，宽高背景色都慢慢变了：

现在，把上面css第5行的transition: 1s;改为transition:width 1s; 那么就只有width是渐变，其他的都是突变，效果如下：

transition-property默认是all，这个例子就是写的width，那就只有width渐变，也可以写none，那就没有渐变效果了，等于没写。

第二个参数就是动画耗时 transition-duration，默认是0，所以必不可少，要不然没有动画效果，没什么可说的。

第三个参数transition-timing-function的值：

ease（默认值）逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier贝塞尔曲线(x1,y1,x2,y2)

http://cubic-bezier.com/ 这个网站是贝塞尔曲线数据生成工具，使用贝塞尔曲线的代码示例如下

    transition:all 1s cubic-bezier(0.27,1.01,0.95,0.22)

第四个参数是延迟时间，就是等待多久才开始执行动画。（在做导航栏下拉菜单时，有个延迟时间，让鼠标划过时不会立即显示，防止误划）上面的都没有设置，如果设置为2s，那边鼠标移动上去div上，div是hover状态，但是要等2s后，动画执行开始，如果不到2s鼠标就移开了，div就不是hover状态了，那就不执行动画了。

上面我们对几个参数搞清楚了，但是有个问题就是，宽高背景要么一起开始变，要么就只有某个突然变，我要想让宽度变化1s完成，高度变慢点2s完成，背景更慢3s完成，怎么办？写3次transition吗？答曰：用逗号隔开即可。

6.transition多样式怎么写？

还是上面div变化的案例，代码就不重新搬运了，只写改动的部分。

            /* 多个样式各个样式用逗号隔开即可  */
            /* 宽度1s完成变化，高度延迟1s执行，2s完成变化，背景色3s完成变化 */
            transition:width 1s, height 2s 1s, background 3s;

效果如下：

未完待续

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML-表单

下一篇：高德地图坐标与百度地图坐标相互转换

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签