CSS3动画之一：Transitions功能

　　在页面里加入些动画，可以是页面更加生动活泼，使用CSS3的动画功能，可以使页面上的文字或图像具有动画功能。比如说背景色从一种颜色，平滑的过度到另一种颜色。CSS3中的动画功能有两种，Transitions和Animations。这两种功能都可以通过改变CSS中的属性值来产生动画效果。本文简单介绍一下Transitions功能的使用方法。

　　到目前为止，支持CSS3中的Transitions功能的浏览器有：Firefox 4+ 、Opera 10+、Safari 3.1+、Chrome 8+等，transitions属性的使用方法如下：

　　transition: property duration timing-function

　　但是，在书写CSS代码的时候，如果是Firefox浏览器，需要书写成“-moz-transition”的形式；如果是Opera浏览器，需要书写成“-o-transition”的形式；如果是Safari或者Chrome浏览器，则写成“-webkit-transition”的形式。

　　前面说了，Transitions和Animations都是通过改变CSS中属性的值来产生动画效果的，所以，property表示需要改变的属性， duration表示在多长时间内完成动画，也就是动画执行的时间，timing-function表示通过神马方法进行动画。

　　下面看一个例子来演示一下Transitions功能的动画效果，页面中一个div元素，背景色为黄色，用过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，通过transition属性指定：当鼠标指针移动到div元素上时，在1s钟内div元素的背景色从黄色平滑过渡到浅蓝色。

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8" /> 5         <title>Transitions功能用法</title> 6         <style> 7         div {  8             background-color: #ff0; 9             -webkit-transition: background-color 1s linear;10             -moz-transition: background-color 1s linear;11             -o-transition: background-color 1s linear;12         }13         div:hover {14             background-color: #0ff;15         }16         </style>17     </head>18     <body>19         <div>鼠标放上来，看我的背景色</div>20     </body>21 </html>

　　可以看到，当鼠标移到div元素上时，背景色从黄色变绿色然后边浅蓝色，这样的平滑过渡效果，在CSS2中一般可以用jQuery去实现。如今采用CSS3的Transitions功能就方便多了。

　　还有一种用法，就是把transition的三个属性分开写，写成: transition-proterty属性, transition-duration属性, transition-timing-function属性。这三个属性的指定方法与含义与transition属性中的三个参数的含义及指定方法完全相同，是一样的。代码如下

transition-property: background-color;
transition-duration: 1s;
transition-timing-function: linear;

　　当然，针对不同的浏览器，前面要加上相应的前缀。在这儿就不一一写出了。

刚才这个例子只是改变了一个属性值，那么Transitions功能可不可以同时改变多个属性值呢？当然可以，why not？下面把刚才的例子稍微修改一下：一个div元素，背景色为黄色，字体颜色为黑色，宽度为400px，通过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，字体为白色，宽度增加到500px。通过transition属性指定当鼠标指针移到到div元素上时在1s钟的时间内完成这几个属性值的变化即平滑过渡。

代码清单：

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8" /> 5         <title>Transitions功能用法</title> 6         <style> 7         div {  8             background-color: #ff0; 9             color: #000;10             width: 400px;11             -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;12             -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;13             -o-transition: background-color 1s linear, color 1s linear, width 1s linear;14         }15         div:hover {16             background-color: #0ff;17             color: #fff;18             width: 500px;19         }20         </style>21     </head>22     <body>23         <div>鼠标放上来，看我的背景色,文字颜色和宽度</div>24     </body>25 </html>

　　和预计的一样，背景色平滑过渡的时候，文字颜色也在平滑过渡，而宽度也渐渐的从400px变为500px。比起以前直接hover是不是炫多了？

使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后再这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果，在CSS3中，除了Transitions功能外，还可以使用Animations功能实现动画效果，它允许通过关键帧的指定在页面上实现更为复杂的动画效果。

转载于:https://www.cnblogs.com/lianjun/archive/2011/09/30/2196912.html

CSS3动画之一：Transitions功能相关推荐

CSS3动画之二：Animations功能
Animations功能与Transitions功能相同,都是通过改变元素的属性值来实现动画效果,不同之处是:Transitions功能只能通过改变指定属性的开始值与结束值,然后再这两个属性值之间进行 ...
css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work) 飞机动画块(他从一边到另一边飞行 - 永远). 可以使用jquery折 ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...
svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画
css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...
html5+css3动画学习总结
HTML5最让人新奇的要属动画这一块了,因为这里的好多样式都是非常的炫酷:让你真正见识到前端的魅力所在,做出的效果往往都是让人:哇!!哇!!赞不绝口的.不信你接着往下看: CSS3动画效果共3大部分: ...

CSS3动画之一：Transitions功能

CSS3动画之一：Transitions功能相关推荐

最新文章

热门文章