css transition用法
时间: 2023-10-12 07:03:51 浏览: 48
CSS transition 是一种 CSS 属性,用于在元素属性的变化过程中添加动画效果,如颜色、大小、位置等。它可以让页面更加生动,吸引用户的注意力。以下是 CSS transition 的用法:
1. 设置 transition 属性
```css
/* 基本语法 */
transition: property duration timing-function delay;
/* 示例 */
/* 在 1 秒内将元素的背景颜色从红色变为蓝色 */
div {
background-color: red;
transition: background-color 1s;
}
/* 在 0.5 秒内将元素的宽度从 100px 变为 200px */
div {
width: 100px;
transition: width 0.5s;
}
```
2. 设置 transition-property 属性
transition-property 属性用于指定哪些 CSS 属性需要添加动画效果。如果不设置该属性,则默认为所有属性都添加动画效果。
```css
/* 示例 */
/* 在 1 秒内将元素的背景颜色从红色变为蓝色,同时将字体颜色从黑色变为白色 */
div {
background-color: red;
color: black;
transition-property: background-color, color;
transition-duration: 1s;
}
/* 在 0.5 秒内将元素的宽度从 100px 变为 200px,同时将左外边距从 0 变为 20px */
div {
width: 100px;
margin-left: 0;
transition-property: width, margin-left;
transition-duration: 0.5s;
}
```
3. 设置 transition-duration 属性
transition-duration 属性用于指定动画的持续时间,单位为秒或毫秒。
```css
/* 示例 */
/* 在 1 秒内将元素的背景颜色从红色变为蓝色 */
div {
background-color: red;
transition: background-color 1s;
}
/* 在 0.5 秒内将元素的宽度从 100px 变为 200px */
div {
width: 100px;
transition: width 0.5s;
}
```
4. 设置 transition-timing-function 属性
transition-timing-function 属性用于指定动画的时间函数,即动画的速度变化情况。常见的值有 linear(匀速)、ease(缓慢开始,然后加速)、ease-in(缓慢开始)、ease-out(缓慢结束)、ease-in-out(缓慢开始和结束)等。
```css
/* 示例 */
/* 在 1 秒内将元素的背景颜色从红色变为蓝色,使用 ease-in-out 时间函数 */
div {
background-color: red;
transition: background-color 1s ease-in-out;
}
/* 在 0.5 秒内将元素的宽度从 100px 变为 200px,使用 ease 时间函数 */
div {
width: 100px;
transition: width 0.5s ease;
}
```
5. 设置 transition-delay 属性
transition-delay 属性用于指定动画的延迟时间,即动画在何时开始播放。
```css
/* 示例 */
/* 在 1 秒后将元素的背景颜色从红色变为蓝色 */
div {
background-color: red;
transition: background-color 1s 1s;
}
/* 在 0.5 秒后将元素的宽度从 100px 变为 200px */
div {
width: 100px;
transition: width 0.5s 0.5s;
}
```
以上就是 CSS transition 的用法。需要注意的是,不是所有的 CSS 属性都支持 transition,只有可数值化的属性才可以使用。