我正在尝试使用纯 CSS 让我的 div 淡出。但它没有做任何事情，不透明度没有改变？
我的代码有什么问题？
<html>
<head>
<style type="text/css">
body {
background-color: red;
}
#box{
width: 300px;
height: 300px;
background-color: green;
-moz-box-shadow: 0px 0px 5px 5px #cc6600;
-webkit-box-shadow: 0px 0px 5px 5px #cc6600;
-webkit-transition: opacity 5s;
-webkit-transform: opacity: 0;
-webkit-transition-delay: 1s;
-moz-transition: opacity 5s;
-moz-transform: opacity: 0;
-moz-transition-delay: 1s;
}
</style>
</head>
<body>
<div id="box">
Insert your content in here...
</div>
</body>
</html>
最佳答案
这些行是无效语法:
-webkit-transform: opacity: 0;
-moz-transform: opacity: 0;
不透明度不能与“变换”一起使用。参见 here有关如何使用 transform 的说明。此外，transform 不是您在此处进行对象淡出的不透明度过渡所需要的。
此外，当对象处于一种状态然后应用第二种状态(通常通过向对象添加类)时，会触发 CSS3 转换。第二个状态指定了一组不同的 CSS 规则，然后对象可以根据您的转换设置从第一个状态“转换”到第二个状态。
您刚刚在 #box CSS 规则中为您的对象指定了一种状态。如果你想要一个转换，那么你必须指定第二个状态和一些触发应用第二个状态的事件。
例如，当鼠标悬停在框上时，此 CSS 会淡出框:
#box{
width: 300px;
height: 300px;
background-color: green;
-moz-box-shadow: 0px 0px 5px 5px #cc6600;
-webkit-box-shadow: 0px 0px 5px 5px #cc6600;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
}
#box:hover {
opacity: 0;
}
此处演示了由鼠标悬停触发的转换和通过单击按钮添加类触发的转换:http://jsfiddle.net/jfriend00/ZWG5Y/ .
在此演示中，我们有一个起始状态并指定了一些转换参数。然后，在第二个状态(此处由鼠标悬停触发)中，我们指定第二个状态，当应用第二个状态时对象将转换到该状态。
关于javascript - CSS3 过渡淡出不发生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8497679/