CODEWITHSUNDEEP
javascripthtmlcss
sazr
sazr

Reputation: 25928

CSS3 Transition Fade Out Not Occuring

I am trying to get my div to fade out using pure 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>

Upvotes: 0

Views: 1975

Answers (2)

jfriend00
jfriend00

Reputation: 707328

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

You have just specified one state for your object in the #box CSS rules. 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:

#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/.

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.

Upvotes: 4

nnnnnn
nnnnnn

Reputation: 150030

Is it the extra colons after "opacity" in these two lines:

-webkit-transform: opacity: 0;

-moz-transform: opacity: 0;

Upvotes: 1

Related Questions