Question

我试图让我的div使用纯CSS淡出。但它没有做什么，不透明度不变？

我的代码出了什么问题？

<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

这些行的语法无效：

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

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

Answer 2

这两行之后是“不透明度”之后的额外冒号：

-webkit-transform: opacity: 0;

-moz-transform: opacity: 0;

CSS3过渡淡出不发生

2 个答案: