css3 background-position change without roll over?

Question

Is there a way to cross fade a background image with CSS3 Transitions.

Basically need the exactly like "twitter hover" in this video http://youtu.be/uCcQHXeiPTY

eg: opacity 0.5 to 1 like that

I'm new in CSS3 :(

HTML & CSS

<div id="social-contacts">
    <ul>
        <li id="fb"><a href=""></a></li>
    </ul>
</div>​


#social-contacts{
    width: 375px;
    float: left;
    margin-left: 50px;
    margin-top: 100px;
}
#social-contacts li{
    float: left;
    list-style: none;
}
#social-contacts li a{
    display: block;
}
#fb a{
    background: url("http://athimannil.com/page/images/social-icons.png") 0 0;
    width: 45px;
    height: 45px;

    opacity: 0.8;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
#fb a:hover{
    background-position: 0 47px;
    opacity: 1;
}​

DEMO :- http://jsfiddle.net/sweetmaanu/BVLkX/

Answer 1

If I understand you correct, you just want to transition the opacity property and not the background property which gives the roll down effect? To do this, we need to specify which property that should be transitioned.

In your case, you have specified that the transition effect should be applied to all properties, which is both background-position: 0 47px; and opacity: 1;.

So, the only thing you need to do is change transition: all 0.5s; to transition: opacity 0.5s;.

Here's a DEMO

Hope that helps!

Answer 2

Do you mean like this? I made it using @keyframes which will animate an element without a roll over

Demo

A Demo of your example

Example with infinite animation

HTML

<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />

CSS

img {
   animation:animate_logo 5s;
   -moz-animation:animate_logo 5s; /* Firefox */
   -webkit-animation:animate_logo 5s; /* Safari and Chrome */
   -o-animation:animate_logo 5s; /* Opera */
}

@keyframes animate_logo {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-moz-keyframes animate_logo /* Firefox */ {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-webkit-keyframes animate_logo /* Safari and Chrome */ {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-o-keyframes animate_logo /* Opera */ {
   from {opacity: .5;}
   to {opacity: 1;}
} 

Article on CSS3 Keyframes