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)
|