CSS Transition Opacity

CSS 中的透明度属性用于控制元素（如内容或图像）的透明度。使用此属性，我们可以将任何图像设置为完全不透明（可见）、完全透明（隐藏）或半透明（部分可见）。它接受一个介于 0 和 1 之间的数值。其中 0 表示完全透明，1 表示完全可见。介于 0 和 1 之间的透明度值，如 0.2、0.4、0.6 等，通过逐渐增加十进制值，使图像从透明变为不透明。

语法

数值必须在 0 到 1 之间才能使图像半透明。如果我们提供 1，图像将是不透明的；如果数值为 0，图像将完全透明。

示例 1：在此示例中，我们将使用透明度属性在鼠标悬停在元素上时使其透明。

Main.html

输出

将鼠标悬停在红色框上以显示透明或透明度效果。

CSS 中的过渡透明度

在 CSS 中，过渡透明度是一种属性，用于将透明度状态从一个级别平滑地更改为另一个状态。这意味着过渡透明度会在定义的持续时间内将不透明元素的透明度状态更改为透明。过渡有四个属性：transition-property、transition-duration、transition-timing-function 和 transition-delay，用于在图像上执行透明度效果。transition-duration 是渐变或突变的重要属性，它在指定的毫秒或秒时间内在元素上反映透明度效果。

过渡的简写属性如下

定义 CSS 中过渡透明度的语法

过渡属性

以下是用于控制过渡效果的过渡属性。

注意：在为图像或内容设置过渡属性时，我们必须定义 transition-duration 属性；否则，持续时间将为 0，并且不会显示任何效果。

CSS 中过渡透明度的必要性

透明度是一个简单的 CSS 属性，用于通过将透明度范围设置为 0 到 1 来控制图像的透明度。它反映了元素上的静态或即时更改以显示透明度效果。例如，如果我们想将图像显示为透明，我们必须将透明度值设置为 0 到 1。之后，它会立即显示透明度效果，而不是花费一些时间。因此，我们在 CSS 中使用过渡透明度，它在定义的持续时间内控制元素的不透明度。使用过渡透明度中的 transition-time-function，我们可以确定元素的动画曲线，该动画曲线指定了图像上的快速透明度效果。通过这种方式，我们使用过渡透明度效果来反映在指定时间段内的更改，而不是立即发生。

示例 2：在此示例中，我们将使用过渡透明度属性，该属性在指定持续时间内反映透明度效果，而不是立即生效。

File1.html

输出

将鼠标移到绿色框上以显示过渡透明度效果，如下图所示。

元素完全可见需要2 秒，如下图所示。

在上面的示例中，当页面加载时，它只显示绿色框。但是当我们把鼠标悬停在框上时，它会逐渐显示成红色框并带有消息，因为我们将持续时间设置为2 秒。

示例 3：在此示例中，我们使用过渡透明度属性，该属性在指定持续时间内显示透明度效果，而不是立即显示，以检查链接。

Fade.html

输出