CSS3转换淡出没有发生

问题描述：

我想让我的div淡出使用纯CSS。但是它没有做挡光，不透明度没有改变？CSS3转换淡出没有发生

我的代码有什么问题？

<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。此外，变换不是你在这里需要进行不透明转换的地方，因为你的对象会淡出。

另外，当一个对象在一个状态中存在，然后对其应用第二个状态（通常是通过向该对象添加一个类）时，会触发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/。

在这个演示中，我们有一个起始状态，并指定了一些转换参数。然后，在第二个状态（由鼠标悬停在此处触发）中，我们指定了第二个状态，即在应用第二个状态时对象将转换到第二个状态。

答

它是后多余的冒号在这两条线“不透明度”：

-webkit-transform: opacity: 0; 

-moz-transform: opacity: 0;

CSS3转换淡出没有发生

相关推荐