CSS3 transitions

[downv]

Boas,

Estou a fazer um menu e queria usar umas transitions mas não estou a conseguir..

Tenho uma list com os links do menu e depois tenho um "div" com conteúdos (textos, imagens), a "div" esta com "display:none;" e quando esta o mouse hover "li:hover" a "div" fica com "display:block;" e aparece o conteúdo.

O que eu queria era meter umas transitions quando "li:hover" para a div aparecer "fadeInOut", mas não estou a conseguir..

Código:

/* Transitions */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

Obrigado

[Mettafox]

Experimenta assim:

li:hover{
-moz-transition-property: background;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in-out;
-moz-transition-delay: 100ms;
}

[downv]

Ja tinha experimentado..

Pelo que li na net não da para adicionar transitions a elementos que contenham a propriedade "display".

[Mettafox]

(19-06-2011 14:02)downv Escreveu:  Ja tinha experimentado..

Pelo que li na net não da para adicionar transitions a elementos que contenham a propriedade "display".

Usa JS para esconder e fazer aparecer os elementos que queres.
Pode ser que assim resolva o problema...

[downv]

Podia adicionar as animações com jquery, mas só quero que seja CSS, vou deixar assim.

[Mettafox]

(27-06-2011 19:53)downv Escreveu:  Podia adicionar as animações com jquery, mas só quero que seja CSS, vou deixar assim.

E podes usar na mesma jQuery e CSS.
Por exemplo:
$("#id").css("display", "none");

Para vários styles:

$("#id").css({
style1:...,
style2:...,
.......
});