css transition写法
CSS过渡(transition)是一种用于控制元素在变化时的动画效果的属性,它可以实现元素从一种样式状态平滑地过渡到另一种样式状态。CSS过渡可以应用于各种属性,比如背景颜、宽度、高度、边框等,从而实现各种动画效果,例如渐变、淡出、放大缩小等。本文将介绍CSS过渡的基本用法、属性说明以及一些实例演示,以帮助读者充分理解和运用CSS过渡。
一、CSS过渡的基本用法:
CSS过渡的基本语法如下所示:
```css
transition: property duration timing-function delay;
css渐入渐出动画```
其中,
-
property:指定要过渡的属性,可以是任意CSS属性,如background-color、width、height等;
- duration:指定过渡的持续时间,可以是秒(s)或毫秒(ms)的数值,如0.5s、1000ms等;
- timing-function:指定过渡的速度曲线,常用的值有linear、ease、ease-in、ease-out等;
- delay:指定过渡开始前的延迟时间,可以是秒(s)或毫秒(ms)的数值,如0.5s、1000ms等。
可以使用逗号分隔多个属性,这样就可以在一个元素上同时过渡多个属性。
例如,下面的代码将会使一个按钮的背景颜在1秒钟内从红过渡到蓝,在过渡开始前延迟0.5秒:
```css
button {
background-color: red;
transition: background-color 1s ease 0.5s;
}
button:hover {
background-color: blue;
}
```
通过:hover伪类选择器,将按钮的背景颜在鼠标悬停时过渡到蓝。可以看到,按钮的过渡效果是平滑的,而且有一个延迟0.5秒才开始过渡。
二、CSS过渡的属性说明:
1. transition-property: