CSS transition 属性

将鼠标悬停在 <div> 元素上可将宽度从 100 像素逐渐更改为 300 像素：

div {
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

下面有更多 "亲自试一试" 示例。

定义和用法

这个transitionproperty 是以下属性的简写：

笔记：始终指定过渡持续时间属性，否则持续时间为 0s，过渡将没有效果。

默认值：	全 0 缓和 0
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.transition="all 2s"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition: property duration timing-function delay|initial|inherit;

Value	Description
transition-property	Specifies the name of the CSS property the transition effect is for
transition-duration	Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function	Specifies the speed curve of the transition effect
transition-delay	Defines when the transition effect will start
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit