Css Transition

效果预览

Transition

transition 属性是 transition-propertytransition-durationtransition-timing-functiontransition-delay 的一个简写属性。可以为一个元素在不同状态切换时定义不同的过渡效果。包括不同的伪类之间的切换,像是:hover, :active 。或者通过JavaScript实现的状态变化. 使用transition可以使页面操作更平滑.

transition-property

指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画,其它属性仍如通常那样瞬间变化。

transition-duration

指定过渡的时长。或者为所有属性指定一个值,或者指定多个值,为每个属性指定不同的时长。

transition-timing-function

img
指定一个函数,定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

transition-delay

指定延迟,即属性开始变化时与过渡开始发生时之间的时长。

简写语法:

1
div {
2
    transition: <property> <duration> <timing-function> <delay>;
3
}

检测Transition是否完成

当过渡完成时触发一个事件,在符合标准的浏览器下,这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd. 详情查看页面底部的兼容性表格。 transitionend 事件提供两个属性:

  • propertyName

    字符串,指示已完成过渡的属性。

  • elapsedTime

    浮点数,指示当触发这个事件时过渡已运行的时间(秒)。这个值不受 transition-delay 影响。

照例可以用 element.addEventListener() 方法来监听这个事件:

1
el.addEventListener("transitionend", updateTransition, true);

当属性值列表长度不一致时

transition-property 的值列表长度为标准,如果某个属性值列表长度短于它的,则重复其值以长度一致, 例如:

1
div {
2
	transition-property: opacity, left, top, height;
3
	transition-duration: 3s, 5s;
4
}

将按下面这样处理

1
div {
2
	tarnsition-property: opacity, left, top. height;
3
	transition-duration: 3s, 5s, 3s, 5s;
4
}

类似地,如果某个属性的值列表长于 transition-property 的,将被截短。 例如:

1
div {
2
  transition-property: opacity, left;
3
  transition-duration: 3s, 5s, 2s, 1s;
4
}

将按下面这样处理:

1
div {
2
  transition-property: opacity, left;
3
  transition-duration: 3s, 5s;
4
}

###

Transform

translate() 变换函数通过 x 向量和 y 向量移动元素 (i.e. xnew = xold + , ynew = yold +). 如果 y 向量没有被提供,那么默认为 0

scale() 变换函数通过 xy指定一个 等比例放大缩小 操作。如果 y 没有被提供,那么假定为等同于 x

Transition 参考文档
Tranform 参考文档