当CSS3开始发布后，网站设计人员一直希望能够更好的使用css3设计出更有创意的网站。CSS3中引入的新样式使网站专业人员能够在其页面中添加类似Photoshop的效果。这包括投影和发光，圆角等属性。CSS3还引入了类似动画的效果，可用于在网站上创建更好的交互性。
使用CSS3可以添加到网站中的元素的一个非常好的视觉效果 是使用不透明度和过渡属性的组合使它们淡入淡出。这是一种简单且受到大多数浏览器支持的方式，通过创建在网站访问者执行某些操作时引起注意的渐变区域（例如将鼠标悬停在该元素上）来使页面更具交互性。
让我们来看看将这种交互式视觉效果添加到网页上的各种元素是多么容易。在悬停时更改不透明度。我们将首先了解当客户将鼠标悬停在该元素上时如何更改图像的不透明度。对于此示例（HTML如下所示）为了使其变灰，我们将以下样式规则添加到CSS样式表中：
.greydout {
-webkit-opacity：0.25;
-moz-opacity：0.25;
opacity：0.25;
}
这些不透明度设置转换为25％。这意味着图像将显示为其正常透明度的1/4。没有透明度的完全不透明将是100％而0％将是完全透明的。
接下来，当鼠标悬停在图像上时，为了使图像变得清晰（或更准确，变得完全不透明），css代码如下：
:hover
pseudo-class:.greydout:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
您会注意到，对于这些示例，我们使用规则的浏览器前缀版本来确保这些浏览器的旧版本的向后兼容性。虽然这是一个很好的做法，但实际情况是，不透明度规则现在得到了浏览器的良好支持，放弃这些浏览器前缀线是非常安全的。但是，如果要确保支持较旧的浏览器版本，也没有理由不包含这些前缀。请务必遵循公认的最佳做法，即使用正常的，无前缀版本的样式结束声明。要添加更加自然流畅的动画，您需要添加过渡属性，如下所示：
.greydout
class:.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}