WonderCSS

CSS3 转换属性 Transition

常常感叹CSS3的强大,在做好自己的本职工作的同时又想干点以往JS或Flash的“活儿”。CSS3本身带有3制作动画的高等技术:变形(transform)、转换(transition)和动画(animation)。其中 transition 以往经常使用,但却没有细致的理解,今天在网上查询了一番简略要译的记录及介绍一下。

W3C标准中对 css3 中的 transition 这是样描述的:“ css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。 ”

transition 主要包含四个属性值:

  1. 执行变换的属性: transition-property
  2. 变换延续的时间: transition-duration
  3. 在延续时间段,变换的速率变化: transition-timing-function
  4. 变换延迟时间: transition-delay

一 transition-property 执行变换的属性:

transition-property 是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;ident(元素属性名)。当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果。ident是可以指定元素的某一个属性值。其对应的类型如下:

color 颜色变化 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性;
length 长宽范围 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性;
percentage 百分比 同length差不多,不过数值由实数变成了百分比
integer 离散步骤 在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;
number 真实的数值 如:zoom,opacity,font-weight,等属性;
transform list 变形 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
rectangle 通过x, y, width 和 height(转为数值)变换,如:crop
visibility 能见度 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility
shadow 阴影、模糊 作用于color, x, y 和 blur(模糊)属性,如:text-shadow
gradient 梯度 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image
paint server (SVG) 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似
space-separated list of above 如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化
a shorthand property 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

这里需要提醒一点是,并不是什么属性改变都为触发 transition 动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个 transition 动作效果。

二 transition-duration 变换延续的时间:

transition-duration 是用来指定元素 转换过程的持续时间,取值:

三 transition-timing-function 在延续时间段,变换的速率变化:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

ease 逐渐变慢 默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear 匀速 linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in 加速 ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out 减速 ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out 加速然后减速 ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier 该值允许你去自定义一个时间曲线 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

四 transition-delay 变换延迟时间:

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:

在浏览器支持方面 IE 除了IE10版本都不支持,最新版的Firefox,Safari,Chrome,Opera都支持这个属性。即便如此也都还不支持W3C的标准写法,所以在应用transition时我们有必要加上各自的前缀。如:


ul#menu {
     background-color:#eef2f5;
     -webkit-transition: all .3s linear 0s;
     -moz-transition: all .3s linear 0s;
     -ms-transition: all .3s linear 0s;
     transition: all .3s linear 0s;
}

By 于湛 发布于 2013.03.5 5,122 次浏览

CSS3 转换属性 Transition》上有3条评论

  1. Pingback引用通告: 为 HTML 表单定义样式,让它们生动起来! | WonderCSS

  2. Pingback引用通告: CSS3超绚animation动画标签 | WonderCSS

  3. Pingback引用通告: CSS3 Transform 变形属性 | WonderCSS

发表评论

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