CSS3 fade in transition

[MattehCarter]

I'm currently working on my personal portfolio, and on entry I want the container to fade in. I've tried researching CSS3 transitions, but I can't find the effect that I want.

If anyone can help, it would be greatly appreciated.

Many thanks,
Matthew.

 

[Parker]

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

<div id="container">
    Example fade in/out
</div>

div#container{
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   background-color:royalblue;
   padding:15px;
}

div#container:hover{
    opacity: 0.1;
}

Is that what you mean? If so you could use Javascript (jQuery would be the easiest imo) for a bit more compatibility with other browsers.

 

[MattehCarter]

Perfection! Thank you very much

 

[Joopie]

Tip for next time,

Here is a sexy css3 generator =D

CSS3 Generator

There are allot of thinks you can do, and to try it out