FITURE

If you can fight, fight.

首页 >> 分享>>HTML/CSS>>CSS3 transition-记CSS3动画基础(一)

CSS3 transition-记CSS3动画基础(一)

Posted by fiture / 2012年04月12日 / HTML/CSS」「分享

这只是我学习CSS3 动画的一个笔记,慢慢的会出《记CSS3动画基础(二)》等,毕竟现在很多的浏览器都支持CSS3了。

CSS3 动画分为三大类别:Transitions 、Transforms 、Animations,下面我一一道来(因为浏览器的前缀不同,示例代码中我将统一使用-webkit-):

CSS3 动画之——CSS3 transition

transition,即过渡,转换的意思,它能使对象的某个属性width,color等,从一个初始状态过渡,转换到另一个目标属性。transiton只是CSS3 过渡(Transitions)的一个简写属性,就好像background是background-color、background-image等的一个简写形式。

因此,CSS3 transition,就是定义一个状态的过渡,它包含四个子属性:transition-property、transition-duration、transition-timing-fuction、transition-delay。

1、transition-property

transition-property,指定transition过渡的属性,比如:background-color、width、margin、all等(CSS3可过渡属性表)。用法:

-webkit-transition-property: background-color;

2、transition-duration

transition-duration,指定transition过渡的时间,单位为秒(s)或者毫秒(ms),如果时间里面出现有小数点,可以省略小数点前面的0,用法:

-webkit-transition-duration: .5s;

3、transition-timing-function

transition-timing-function,指定transition过渡的方式,transition-timimg-fuction过渡方式是按照贝塞尔曲线来计算的,有几个具体的值:linear,ease,ease-in,ease-out,ease-in-out,加上自定义cubic-bezier(number, number, number, number) 具体用法:

-webkit-transition-timing-function:linear;
-webkit-transition-timing-function:cubic-bezier(0.0,0.0,1.0,1.0);

4、transition-delay

transition-duration,指定transition过渡的延时时间,单位为秒(s)或者毫秒(ms),如果时间里面出现有小数点,可以省略小数点前面的0,用法:

-webkit-transition-delay: .5s;

 

下面以一个DEMO背景/宽度过渡为例:

背景,宽度过渡
#demo {
width:200px; 
height:50px; 
background:#ccc; 
text-align:center;
}
#demo:hover { 
-webkit-transition:width .8s ease,background-color .8s linear;
width:400px;
background-color:#f60;
}

 

以上的代码就实现了这个效果,有两个个地方需要注意:过渡触发、初始状态以及目标状态。过渡触发,一般可以用CSS的一些伪类,还有js的一些事件触发,还有变换的对象必须有初始,和目标状态。

还有一点是如果有多个属性需要变换,可以用简写逗号隔开就行,结合到transform变换是transition-property一般的值是:all

这就是最基础的CSS3动画transition过渡,That's all

一条回应:“CSS3 transition-记CSS3动画基础(一)”

  1. Jimco说道:

    V5!期待更多精品!!

发表评论

电子邮件地址不会被公开。 必填项已用*标注