How to give fadein effect to a div tag using CSS

Question

I have a Ul tag on hover of it, I display a div using css.
Now i want that div tag will 1st fadein or any other effect like animate etc.
I know it can be done easily by using jQuery, but want to know can i achieve this using Html5,css3,css

Here JsFiddle

Answer 1

From what I can tell, removing the display: none; and display: block; lines from your code enables animation: http://jsfiddle.net/Cedue/31/

(That is a copy of your original fiddle with only the display: lines removed.) However, this raises the issue that you can access, highlight, and even hover the text when it's hidden; if you do not wish to have that behavior you might wish to look into another means of hiding it until the correct area is hovered, such as shifting it with margins.

As Ana has mentioned, as well, if you wish to animate the entire fade you should use opacity as your transition parameter (e.g.: transition: opacity 1s ease;, with the additional lines for separate browser support). If you use background as the transition property as you do in your example, only the background fades and the text appears instantly.

EDIT: due to my own curiosity I tested this under Chrome and Firefox, each for both Windows and Mac, and can confirm that removing the display lines caused the animation to work on all of them.

Answer 2

Fading in http://jsfiddle.net/thebabydino/Cedue/7/

There was never anything like -webkit-opacity or -moz-opacity

If you want to transition the opacity, then either write

transition: opacity 1s

or

transition: 1s

Answer 3

You should look into CSS3 transitions http://www.alistapart.com/articles/understanding-css3-transitions/

Answer 4

Check this site, it uses css and javascript.

Pure CSS implementation here.