scss transition
时间: 2023-10-15 17:27:40 浏览: 48
SCSS (Sassy CSS) is an extension of CSS that adds additional features and capabilities. Transition in SCSS is used to create smooth animations between different CSS property values over a specified duration. It allows you to control the timing and duration of the transition effect.
To use transition in SCSS, you can define it using the `transition` property within a CSS rule. Here's an example:
```scss
.element {
transition: property duration timing-function delay;
}
```
- `property`: Specifies the CSS property that you want to apply the transition effect to.
- `duration`: Specifies the duration of the transition in seconds or milliseconds.
- `timing-function`: Specifies the timing function for the transition effect. It defines how the intermediate property values are calculated. Popular options include `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, etc.
- `delay`: Specifies a delay before the transition effect starts, also in seconds or milliseconds.
For example, if you want to create a transition effect on the `background-color` property that lasts for 0.5 seconds with an ease-in timing function, you can write:
```scss
.element {
background-color: red;
transition: background-color 0.5s ease-in;
}
.element:hover {
background-color: blue;
}
```
In this example, when you hover over the element, the background color will transition smoothly from red to blue over a duration of 0.5 seconds using an ease-in timing function.