Hi all,
Project after project i’m finding myself using css3 transition (and animation) more and more, till the point i’m questioning myself if $.animate is still a big deal.
Almost every animation is doable, with a nice retrocompatibility on older browser and awesome performance, today we’ll look at the easiest and most overused one: the Fade!

This code is a entry-level for css3 animations, that’s why i’ll suggest you to look deeper in animate.css, which is a great css collection of animations. (pure art imo)

.my_element .my_faded_element{
   visibility:hidden;
   opacity:0;
   transition:visibility 0s linear 0.2s,opacity 0.2s linear;
}
.my_element:hover .my_faded_element{
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

Instead of using a display:none; on hidden elements we’ll relay on opacity: 0/1, the transition: visibility/opacity is our css3 function and visibility:hidden/visible is a nice fallback for older browsers.
You probably already now that you can always tweak speed (which is quite faster in this demo) raising the numbers in the transition property.

You can check a demo here 🙂