Slow down CSS Opacity Animation

Question

I want to slow down animation timing in .opacity CSS property. Like, i want it to delay 0.2ms or something like that.

To get a better idea, opacity is added when hovered a featured post on my site here: http://www.thetechnodaily.com

Remember: I have NOT USED jQuery in this. Its pure CSS.

Solution 1

What you seem to be looking for is CSS Transitions.

Transitions allow you to set a delay and the length of the transition.

Solution 2

I think this might be what you are trying to achieve?

http://fiddle.jshell.net/9VB72/2/

More info

Solution 3

Using jquery

$('#clickme').click(function() {
   $('#book').animate({
       opacity: 0.25,
       left: '+=50',
       height: 'toggle'
   }, 5000, function() {
     // Animation complete.
   });
});

http://api.jquery.com/animate/

Using css you can try something like this:

.class:hover {
    opacity: 1; 
    -moz-transition: all 0.4s ease-out;  /* FF4+ */
    -o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.4s ease-out;  /* IE10? */
    transition: all 0.4s ease-out;  
}