How to use CSS3 transitions

Question

I have the following HTML: ```

// Code

``` And (working) jquery that toggles between them: ``` $('.back-welcome').click(function(){ $('#welcome-content').toggle(); $('#configure-content').toggle(); }); ``` I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following: ``` #welcome-content, #configure-content{ -webkit-transition: all 400ms; -o-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -khtml-transition: all 400ms; } ``` However, no animation takes place. What am I doing wrong?

Accepted Answer

The property `display` that assign the method `toggle ()` can't be animated with the CSS transitions. Maybe you want to look at `fadeIn()` and `fadeOut()`.

Edit

I've found this another method fadeToggle() i don't know much about it but you can search and use this:

```
$('.back-fade').click(function(){
  $('#welcome-content').fadeToggle(2000);
  $('#configure-content').fadeToggle(2000);        
});
```

Check this demo http://jsfiddle.net/8urRp/14/ *

*I made the divs with absolute position to keep them on the same space

How to use CSS3 transitions

Solution

Problem

Related problems