CSS3学习笔记-过渡

学习CSS3过渡（Transitions）是为了在元素状态之间创建平滑的动画效果。下面是一些关于CSS3过渡的学习笔记：

过渡基础语法：

使用transition属性来定义过渡效果。

通过指定过渡的属性、持续时间、延迟和过渡速度来设置过渡。

可以使用逗号分隔多个属性，为每个属性设置不同的过渡效果。

过渡属性：

transition-property：指定要过渡的CSS属性。可以是单个属性或者使用all表示所有属性。

transition-duration：指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。

transition-timing-function：指定过渡的速度曲线，可以使用预定义的值（如ease、linear、ease-in等）或者自定义贝塞尔曲线。

transition-delay：指定过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。

过渡的应用：

通过将过渡属性应用于元素的初始状态和目标状态，可以创建平滑的过渡效果。

过渡可以应用于多个属性，例如transition: color 1s, background-color 2s;。

可以使用伪类（如:hover、:focus）来触发过渡效果。

过渡还可以与其他CSS特性（如动画、变换）结合使用，以创建更复杂的动画效果。

兼容性考虑：

CSS3过渡在大多数现代浏览器中得到支持，但在一些旧版本的浏览器中可能不起作用。

为了兼容性，可以使用浏览器前缀（如-webkit-、-moz-、-o-）来设置过渡属性。

以下是一个使用CSS3过渡创建简单动画效果的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 1s, height 1s, background-color 1s;
    }

    .box:hover {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在这个示例中，我们创建了一个带有过渡效果的方块（.box）。当鼠标悬停在方块上时，宽度、高度和背景颜色会平滑地过渡到新的值。这个过渡效果由transition属性定义，指定了过渡的属性（width、height、background-color）和持续时间（1秒）。当鼠标悬停在方块上时，通过改变这些属性的值，实现了平滑的过渡效果。

在线展示:

.box { width: 100px; height: 100px; background-color: rgba(255, 0, 0, 1); transition: width 1s, height 1s, background-color 1s }
.box:hover { width: 200px; height: 200px; background-color: rgba(0, 0, 255, 1) }