css3 变换 transition

作者：System 时间：2024年08月20日分类：所有,css3 字数：534

CSS3的transition属性用于设置一个属性的变化时间。这种变化通常在用户交互（如鼠标悬停或焦点）时发生，但也可以在元素的某个属性改变时自动触发。

基本语法如下：




transition: property duration timing-function delay;

例子：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在div上时，它的宽度会在1秒钟内从100px变为200px，并且会使用ease-in-out的时间曲线。