CSS3过渡淡出未发生

Question

I am trying to get my div to fade out using pure CSS. 我试图让我的div使用纯CSS淡出。 But its not doing anthing, the opacity is not changing? 但是它没有做任何事情，不透明度没有改变吗？

What is wrong with my code? 我的代码有什么问题？

<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>

Answer 1

These lines are invalid syntax: 这些行是无效的语法：

-webkit-transform: opacity: 0;
-moz-transform: opacity: 0;

Opacity is not something that can be used with "transform". 不透明度不能与“变换”一起使用。 See here for a description of how transform can be used. 有关如何使用转换的说明，请参见此处。 Further, transform is not what you need here to have an opacity transition where your object fades out. 此外，这里并不是要使对象淡出的不透明过渡所需要的变换。

In addition, CSS3 transitions are triggered when an object exists in one state and then a second state is applied to it (often by adding a class to the object). 此外，当对象处于一种状态，然后将第二种状态应用于对象时（通常通过向该对象添加类），将触发CSS3转换。 This second state specifies a different set of CSS rules and the object can then "transition" from the first state to the second state according to your transition settings. 此第二状态指定一组不同的CSS规则，然后该对象可以根据您的过渡设置从第一状态“过渡”到第二状态。

You have just specified one state for your object in the #box CSS rules. 您刚刚在#box CSS规则中为对象指定了一种状态。 If you want a transition, then you have to specify a second state and some event that triggers applying the second state. 如果要进行过渡，则必须指定第二个状态以及一些触发应用第二个状态的事件。

For example, this CSS would fade out the box when the mouse hovered over it: 例如，当鼠标悬停在该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;
}

Working demonstration here of both a transition triggered by mouse hover and a transition triggered from adding a class via a button click: http://jsfiddle.net/jfriend00/ZWG5Y/ . 此处通过鼠标悬停触发的过渡以及通过单击按钮添加类触发的过渡的工作演示： http : //jsfiddle.net/jfriend00/ZWG5Y/ 。

In this demo, we have a starting state and we specify some transition parameters. 在此演示中，我们有一个开始状态，并指定了一些过渡参数。 Then, in the second state (which is triggered by mouse hover here), we specify a second state that the object will transition to when the second state is applied. 然后，在第二种状态（在此由鼠标悬停触发）中，我们指定当应用第二种状态时对象将转换为的第二种状态。

Answer 2

Is it the extra colons after "opacity" in these two lines: 这两行是“不透明”之后的多余冒号：

-webkit-transform: opacity: 0;

-moz-transform: opacity: 0;

CSS3过渡淡出未发生

问题描述

2 个解决方案

解决方案1
4 已采纳 2011-12-13 23:28:58

解决方案2
1 2011-12-13 23:29:06

CSS3过渡淡出未发生

问题描述

2 个解决方案

解决方案1 4 已采纳 2011-12-13 23:28:58

解决方案2 1 2011-12-13 23:29:06

解决方案1
4 已采纳 2011-12-13 23:28:58

解决方案2
1 2011-12-13 23:29:06