CSS动画与变形（二）------transition过渡

CSS动画与变形（二）

                                                               ———过渡

一、什么是过渡：

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

二、浏览器支持：

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

Internet Explorer 9 以及更早的版本，不支持 transition 属性。

Chrome 25 以及更早的版本，需要前缀 -webkit-。

三、过渡属性：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

1.transition属性：

定义和用法：

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

请始终设置 transition-duration属性，否则时长为 0，就不会产生过渡效果。

 

语法：

transitiotransition: property duration timing-function delay;

2.transition-property属性：设置名称

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

过渡效果通常在用户将鼠标指针浮动到元素上时发生。

transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定

例如background-color,width,height等各种标准的CSS属性。

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

用一个简单的例子来说明这个问题：

假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，

那么all代表的就是“width”、“height”和“background”。

如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

 

3.transition-duration：过渡持续时间

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

 

4.transition-timing-function:速度

transition-timing-function属性指的是过渡的“缓动函数”。

主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

 

ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。（v-t图像）

 

 

linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。

 

 

 

ease-in:动画开始的速度较慢，然后速度加快。

 

 

ease-out:动画开始的速度很快，然后速度减慢。

 

 

 

ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

 

 

 

1. 5.trandition-delay:动画何时开始（延时n秒后执行）

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，

只要把几个transition的声明串在一起，用逗号（“，”）隔开，

然后各自可以有各自不同的延续时间和其时间的速率变换方式。

但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay

 

在一个例子中使用所有过渡属性：

div

{

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

/* Firefox 4 */

-moz-transition-property:width;

-moz-transition-duration:1s;

-moz-transition-timing-function:linear;

-moz-transition-delay:2s;

/* Safari 和 Chrome */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

/* Opera */

-o-transition-property:width;

-o-transition-duration:1s;

-o-transition-timing-function:linear;

-o-transition-delay:2s;

}

简写：

div

{

transition: width 1s linear 2s;

/* Firefox 4 */

-moz-transition:width 1s linear 2s;

/* Safari and Chrome */

-webkit-transition:width 1s linear 2s;

/* Opera */

-o-transition:width 1s linear 2s;

}

当“transition-property”属性设置为all时，表示的是所有中点值的属性。

假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，

那么all代表的就是“width”、“height”和“background”。

如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。