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/

What do you mean, 'without rollover'? Do you want the image to change automatically, without the user doing anything? — Jules, Dec 18 '12 at 18:39
@JulesMazur I would like to make like "twitter hover" in this video http://youtu.be/uCcQHXeiPTY — Mo., Dec 19 '12 at 10:32

Christofer Vilander · Accepted Answer · 2012-12-19T17:30:14.557

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!

Mr. Alien · Answer 2 · 2012-12-19T06:28:38.023

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

first of all thanks for your help :). somewhat like the first demo http://jsfiddle.net/wX3Wt/. I need to change the first image to second image like 'twitter' in this video http://youtu.be/uCcQHXeiPTY — Mo., Dec 19 '12 at 10:31

css3 background-position change without roll over?

2 Answers2