2.7 KiB
2.7 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| CSS3 Transitions | CSS3过渡 |
CSS3过渡
如果您希望您的应用或网页更具动态性和美观，则使用CSS3 过渡非常有用。
实际上，转换允许您以平滑的方式更改属性（ width ， color ，...）值。
transition属性是transition-property ， transition-duration ， transition-timing-function ， transition-delay的简写属性，语法如下：
transition: transition-property transition-duration transition-timing-function transition-delay
例如 ：
transition: width 2s ease-in-out 1s;
属性描述
transition-property
指定应应用转换的属性的名称 ：
background-colorcolorwidthheightmarginborder-radius- 等等 ！
例如 ：
transition-property: width; /* means the transition applies on the width */
transition-duration
指定转换应采用 的秒数或毫秒数 ：
例如 ：
transition-duration: 2s /* means the transition effect last 2s */
transition-timing-function
指定过渡效果的速度曲线 。因此，您可以在其持续时间内更改转换的速度 。
以下是最常用的值：
lineareaseease-inease-outease-in-outcubic-bezier(n, n, n, n)
例如 ：
transition-timing-function: linear
注意：上面的所有值实际上都是特定的cubic-bezier 。例如， linear相当于cubic-bezier(0.25,0.1,0.25,1)
您可以在这里试验并了解有关_Cubic Bezier的_更多信息
transition-delay
转换开始时以秒或毫秒指定。
例如 ：
transition-delay: 1s /* means wait 1s before the transition effect start */
如何使用过渡？
您可以通过两种方式编写转换：
使用速记属性（ transition ）
div {
width: 200px;
transition: all 1s ease-in-out;
}
div:hover {
width: 300px;
}
为所有过渡属性赋予值
div {
width: 200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
注意：两个例子都是等价的
例子
以下是一些包含简单过渡的简单笔：