CSS3中的transition详解

川长思鸟来 2022-05-11 08:00 157阅读 0赞

> Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。

## Transition对应的CSS属性列表： ##

transition-property

1.  指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
2.  当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
3.  初始默认值为all.

transition-duration

1.  指定“转换”过程的时间，如：1s、none。
2.  初始默认值为0.

transition-timing-function

1.  指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
2.  cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。
3.  初始默认值为default.
    
    [![TimingFunction.png][]][TimingFunction.png]

transition-delay

1.  指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
2.  初始默认值为0.

## 属性值连写（短属性） ##

1.  transition和background等CSS属性一样支持属性值连写，比如：-webkit-transition: width 1s easy-in-out;
2.  需要值得注意的是，原则上所有属性值是不区分位置的，但是“时间属性值”有点不同，浏览器会根据先后顺序决定，第一个可以解析为时间的属性值将体现为transition-duration，第二个可以解析为时间的属性值将体现为transition-delay

## 浏览器支持状况？ ##

*  Chrome 2+(-webkit-transition)，Firefox3.7+(-moz-transition)，Safari 3.1+(-webkit-transition)，Opera 10.5+(-o-transition)，其他浏览器暂不支持

Reflow和Repaint？

*  Transition执行过程中，同样会产生大量的Reflow和Repaint，不过不同的是，这些变化都有一定是按照CSS中定义的运作方式规律的进行，所以浏览器可以预知整个过程的Reflow和Repaint过程，从而对其进行优化处理。(个人猜测，这需要查看webkit源码后再作结论)

## 正确理解Timing-function ##

*  这是几个Timing-function曲线图：

[![34sf.gif][]][34sf.gif]  
这是几个默认timing-function的示例：(请在chrome浏览器下产看效果)

default »

linear »

ease-in »

ease-out »

ease-in-out »

cubic-bezier »

一次“转变”便是一次曲线过程

激发Transition的条件

*  只要为元素指定任意一个以上的transition属性，元素在改变属性值的时候便可执行transition效果，并设其他属性值为初始值。

如果我们把下面的例子（transition:color 1s ease-in;），我们改变了字体颜色的持续时间为1秒）。请参阅下面的一些例子，可以应用到你自己的项目中使用。  
[css3][]颜色过渡范例

.my_class { 
    transition: color .5s ease-in;
    -moz-transition: color .5s ease-in;
    -o-transition: color .5s ease-in;
    -webkit-transition: color .5s ease-in;
    }
    .my_class:hover { 
    color:#066;
    }
    可以用作：创建链接和按钮的鼠标悬停时候的效果。

把鼠标移过来看看效果  
当前前端

[css3][]运动过渡范例

.my_class { 
    transition: transform .5s ease-in;
    -moz-transition: -moz-transform .5s ease-in;
    -o-transition: -o-transform .5s ease-in;
    -webkit-transition: -webkit-transform .5s ease-in;
    }
    .my_class:hover { 
    transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    }

这可以被用来创建更具交互性的网站，如菜单项或图片廊，等。

> 最后加上原文的链接： http://www.dqqd.me/css3-transition.html

[TimingFunction.png]: http://www.dqqd.me/wp-content/uploads/2011/09/TimingFunction.png
[34sf.gif]: http://www.dqqd.me/wp-content/uploads/2011/09/34sf.gif
[css3]: http://www.dqqd.me/tag/css3