文章简介:CSS变换(transition) |
-webkit-transition
-moz-transition
-o-transition
transition
CSS property
被变换的属性(比如, color)。
Duration
变换持续的时间,通常以秒来计算(比如, .25s).
Timing function
允许你控制持续的时间的计算方式。与其使用一个简单的线性计算,你可以使变换加速(渐入)或者减速(淡出),或者甚至specify a beat or count (比如,linear). More on this later in the article.
Delay
在动作和变换开始之间等待多久,通常用秒来表示(比如, .1s)。如果你不想延迟,该值可省略。
CSS属性
color
色彩
crop
百分比
font-weight
数字
height
百分比,长度
letter-spacing
长度
line-height
百分比,长度,数字
opacity
数字
outline-offset
整数
outline-width
长度
right
百分比,长度
text-indent
百分比,长度
text-shadow
阴影
vertical-align
百分比,长度,关键词
visibility
可见性
word-spacing
百分比,长度
z-index
正整数
zoom
数字
变换计时与延迟
使用变换,你可以改变变换的速率,在开始的时候较慢然后在结束的时候加速,反之亦然,或者之间的任何事情。CSS变换有5个计时的关键词,同时也允许你自己定义你自己的计时曲线。
cubic-bezier(x1, y1, x2, y2)
X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。
linear
均速
ease
逐渐慢下来
ease-in
加速(渐入)
ease-out
减速(淡出)
ease-in-out
加速然后减速