Question

I need to make a smooth nice transition to show/hide a text depending if the top element have a class “error” or not.

But i really cant get this to work.
http://jsfiddle.net/qd9wq/1/

Would really appreciate any kind of help.

I’ve got my idea from http://fvsch.com/code/transition-fade/test5.html#test3.
But i dont want to use 2 kind of classes.

Edit: Solved problem: http://jsfiddle.net/qd9wq/78/

Answer 1

You need to add a transition-delay to this class:

fieldset.error > ul > li {
  margin-top: 0px;
  -webkit-transition-delay:0s;
  -moz-transition-delay:0s;
  -o-transition-delay:0s;
  transition-delay:0s;
}

Try it here

You can also remove all the !important, they are not needed.