CSS - transition 过渡属性及使用方法（示例代码）

前言

该属性用于元素各种 “改变” 后的过渡效果动画，包括但不限于颜色、宽高、缩放等。

如下图所示，使用过渡属性便可轻松完成。

示例代码

您可以直接复制运行，查看效果。

<div>demo</div>

div {
	width:100px; height:100px;
	/* .5 就是过渡的时间 */
	transition: all .5s linear;
}

/* 鼠标移入后加宽 */
div:hover {
	width: 300px;
}

API

始终指定 transition-duration 属性，否则持续时间为 0，transition 不会有任何效果。

transition 属性设置元素当过渡效果，四个简写属性为：

• property：指定CSS属性的name，transition效果
• duration：transition效果需要指定多少秒或毫秒才能完成
• timing-function：指定transition效果的转速曲线
• delay：定义transition效果开始的时候

transition: property duration timing-function delay;

更多详见：文档。