35 lines
1.2 KiB
Markdown
35 lines
1.2 KiB
Markdown
|
---
|
|||
|
title: Transition
|
|||
|
localeTitle: 过渡
|
|||
|
---
|
|||
|
## 过渡
|
|||
|
|
|||
|
`transition`属性允许您在给定的持续时间内平滑地(从一个值到另一个值)更改属性值。 \`\`\`CSS 过渡:全部300毫秒;
|
|||
|
```
|
|||
|
### Transition on Several Property Values
|
|||
|
|
|||
|
You can change multiples property values with transition property.
|
|||
|
```
|
|||
|
|
|||
|
CSS 过渡:宽度300ms,高度2s;
|
|||
|
```
|
|||
|
### Specify the Speed Curve of the Transition
|
|||
|
|
|||
|
You can specify a speed curve on an element in transition property.
|
|||
|
```
|
|||
|
|
|||
|
CSS 过渡:高度2s线性;
|
|||
|
```
|
|||
|
or the property `transition-timing-function`
|
|||
|
```
|
|||
|
|
|||
|
CSS transition-timing-function:linear; \`\`\`
|
|||
|
|
|||
|
### `transition-timing-function`不同值
|
|||
|
|
|||
|
`ease` - 指定缓慢启动的转换效果,然后快速,然后缓慢结束(这是默认值) `linear` - 指定从开始到结束具有相同速度的过渡效果 `ease-in` - 指定缓慢启动的过渡效果 `ease-out` - 指定慢速结束的过渡效果 `ease-in-out` - 指定缓慢开始和结束的过渡效果 `cubic-bezier(n,n,n,n)` - 允许您在cubic-bezier函数中定义自己的值
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
* MDN文档: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
|
|||
|
* Easings参考: [Easings](http://easings.net/en)
|