html transition

HTML中的transition属性用于指定CSS属性的过渡效果。当CSS属性的值发生变化时，可以通过transition属性来控制这种变化的速度和方式。以下是一个例子：

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: all 1s;
    }
    div:hover {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
<div></div>

在上面的例子中，当鼠标悬停在div元素上时，div元素的宽度、高度和背景颜色都会发生变化，这种变化会在1秒钟内完成，这是由transition属性指定的。

另外，transform属性用于指定元素的变换效果，包括旋转、缩放、平移等。以下是一个例子：

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        transform: rotate(7deg);
    }
</style>
<div></div>

在上面的例子中，div元素被旋转了7度，这是由transform属性指定的。

相关问题

transition

transition是CSS3中的一个特性，用于为元素添加过渡效果，使元素从一种样式变换到另一种样式时更加平滑自然。它包括四个属性：transition-property、transition-duration、transition-timing-function和transition-delay。

- transition-property：规定应用过渡的CSS属性的名称，可以是单个属性或多个属性，多个属性之间用逗号隔开。
- transition-duration：定义过渡效果花费的时间，默认为0，要用单位，可以是ms或者s。
- transition-timing-function：规定过渡效果的时间曲线，默认为"ease"，也可以是linear（匀速）、ease-in（加速）、ease-out（减速）或ease-in-out（先加速后减速）等。
- transition-delay：规定过渡效果何时开始，默认是0，也要用单位，可以是ms或者s。

下面是一个例子，当鼠标悬停在一个按钮上时，按钮的背景颜色会在0.5秒内从红色变为绿色：

button {
  background-color: red;
  transition-property: background-color;
  transition-duration: 0.5s;
}

button:hover {
  background-color: green;
}