1

CSS3 トランジションで背景画像をクロス フェードする方法はありますか。

基本的に、このビデオの「Twitter ホバー」とまったく同じものが必要です http://youtu.be/uCcQHXeiPTY

例: opacity 0.5to 1like that

私は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;
}​

デモ:- http://jsfiddle.net/sweetmaanu/BVLkX/

4

2 に答える 2

2

あなたが正しいことを理解していれば、ロールダウン効果を与える背景プロパティではなく、不透明度プロパティを移行したいだけですか? これを行うには、移行するプロパティを指定する必要があります。

あなたの場合、トランジション効果をallプロパティに適用する必要があることを指定しました。これは と の両方background-position: 0 47px;ですopacity: 1;。

したがって、あなたがする必要があるのは、に変更することだけtransition: all 0.5s;ですtransition: opacity 0.5s;。

ここにデモがあります

それが役立つことを願っています!

于 2012-12-19T16:26:22.130 に答える
1

こんな感じですか？@keyframesロールオーバーせずに要素をアニメーション化するを使用して作成しました

デモ

あなたの例のデモ

無限アニメーションの例

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;}
}

CSS3 キーフレームに関する記事

于 2012-12-19T06:21:57.340 に答える