CSS3背景画像の遷移

121

CSSトランジションを使用して「フェードインフェードアウト」効果を作成しようとしています。しかし、私はこれを背景画像で機能させることができません...

CSS：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

見てください：http : //jsfiddle.net/AK3La/

css  background  background-image  css-transitions 
— ニック・ザニ
ソース

回答:

104

移行できbackground-imageます。img要素で以下のCSSを使用します。

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

これはChrome、Opera、Safariでネイティブにサポートされています。Firefoxはまだそれを実装していません（bugzil.la）。IEについてはわかりません。

— 恒傑
ソース
105
background-imageはアニメート可能なプロパティではないため（w3.org/TR/css3-transitions/#animatable-properties）、ソリューションは標準に準拠していません。
— TLindig
12
これは解決策ではありません-FFとIEはそれをサポートしていません。また、上記のように、仕様でサポートされているはずのプロパティではありません。
— Sentinel 2014年
Fxでの現在の開発についても参照してください：bugzilla.mozilla.org/show_bug.cgi
— Volker E.
2
@TLindigアニメート可能なプロパティである必要があります。
3
アニメート可能なプロパティはbackgroundであり、これを使用する必要があります（これはChromeで機能します）。質問が投稿されてから仕様（または実装）が変更された可能性があります
— fps
37

（私が自分で見つけた）解決策は忍者のトリックです。2つの方法を提供できます。

まず、の「コンテナ」を作成する必要があります<img>。これには、通常の状態とホバー状態が同時に含まれます。

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

  • CSS3セレクターhttp://jsfiddle.net/eD2zL/1/（あなたはこの1つを使用する場合は、「通常」の状態は、あなたのコンテナの最初の子であるか、または変更されますnth-child()順序）

  • CSS2ソリューションhttp://jsfiddle.net/eD2zL/2/（違いはほんの一部のセレクター）

基本的に、あなたがhide「通常」の状態にする必要があり、あなたがたときに彼らの「ホバー」を表示し、それを置きます

それだけです。誰かが役に立てば幸いです。

— ルッフォ
ソース
素晴らしい解決策。最初のサンプルを試してみたところ、トランジションの継続時間を4秒に増やすと、トランジションの途中でZインデックスが切り替わるときに非常に顕著なジャンプが見られることに気づきました。少なくともChrome 35では、プロパティ値を「all 4s ease、z-index 1ms」（jsfiddle.net/eD2zL/330）に変更することで、z-indexスイッチのタイミングをシフトし、遷移をクリーンアップできます。
— Neal Stublen 2014
2
@NealS。あなたが正しい。この回答は2歳ですが、z-indexを削除します。不要なようです。画像は整然としている必要があります。
— Ruffo 2014
どうもありがとう。あなたの解決策は私にとって非常に役に立ちます。
— スラム
このソリューションを使用すると、「遅延読み込み」は可能ですか？
— ダニエル
16

私のために働いた解決策を見つけました...

リンクのみを含むリストアイテム（またはdiv）があり、これがFacebookやTwitterなどのページへのソーシャルリンクであるとしましょう。そしてあなたはこれを行うことができるスプライト画像を使用しています：

<li id="facebook"><a href="facebook.com"></a></li>

「li」の背景をボタン画像にする

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

次に、リンクの背景画像をボタンのホバー状態にします。これに不透明度属性を追加し、0に設定します。

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

ここで必要なのは、「a：hover」の下の「不透明度」だけで、これを1に設定します。

#facebook a:hover {
   opacity:1;
}

各ブラウザーの不透明度遷移属性を「a」と「a：hover」に追加して、最終的なCSSが次のようになるようにします。

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

フェージング背景画像ボタンが表示されるように正しく説明した場合は、少なくともそれが役立つことを願っています！

— オースティンパリッシュトーマス
ソース
3
ビデオチュートリアル版も作りました。youtube.com/watch?v=6ieR5ApVpr0
— オースティンパリッシュトーマス
AFAIKでは、ホバー疑似クラスで遷移を指定する必要はありません。アンカータグタイプの遷移定義はホバー動作に持ち越され、変更する必要があるのは不透明度だけです。スタイルはID /タグタイプに直接適用されるため、この例はうまく機能することに注意してください。クラスでこれを行う場合は、遷移が定義されたクラスを追加および削除していないことを確認する必要があります。
— KeithS 2017年
13

疑似要素を使用して、私がそのフィドルで行ったように、必要な効果を得ることができます。

CSS：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML：

<div class="title">
    <a href="#">HYPERLINK</a>
</div>
— MaxCloutier
ソース
2
これは素晴らしい作品が、あなたは2つの問題に実行することがあります。1）あなたが表示されていない場合は:after要素を、設定してみてくださいwidthとheightなど100%の代わりにinherit、2）場合background-image、実際に表示されているフォアグラウンド用負のインデックスを使用する:after要素：z-index: -1;
— ラデク・ペッシュ
9

jQueryを使用できる場合は、BgSwitcherプラグインを試して、背景画像をエフェクトで切り替えることができます。これは非常に簡単に使用できます。

例えば ​​：

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

独自のエフェクトを追加します。エフェクトタイプの追加をご覧ください。

— MaxDhn
ソース
おかげで、このプラグインを使用してテーブルの背景の変化をアニメーション化することで問題を解決しました。
— userlond 2015
4

これを試してください、アニメーション化された背景がWebでは機能しますが、ハイブリッドモバイルアプリは機能しません

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}
— ヘシャム・ナセル
ソース
4

背景画像がアニメーション化することができない考えると、私は擬似セレクタを使用して、2つの異なる背景画像との間の移行を可能にするミックスイン少しSCSSを作成する前と後。それらは異なるz-indexレイヤーにあります。先にあるものは、不透明度0から始まり、ホバーで表示されます。

線形グラデーションのアニメーションを作成する場合も同じ方法を使用できます。

scss

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

今、あなたは単にそれを

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

あなたはそれをここでチェックすることができます：https： //jsfiddle.net/pablosgpacheco/01rmg0qL/

— パブロSGパチェコ
ソース
とても良い解決策です！要素の状態 '：before'と '：after'を上手に活用する方法について、よりよく理解してください:-)
— joronimo
3

アニメーションopacityがオプションでない場合は、をアニメーション化することもできますbackground-size。

たとえば、このCSSを使用backgound-imageして遅延を設定しました。

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}
— shock_one
ソース
背景画像のから.afterへのフェードアウト効果.beforeが必要な場合は、背景画像をに設定する必要があります.before。それ以外の場合は、アニメーションなしで消えます。
— Radek Pech
2

Salam、この回答はChromeでのみ機能します。IEとFFが色の移行をサポートします。

HTML要素を作成する必要はありません。HTML要素opacity:0にテキストが含まれることもあり、要素を2倍にする必要もありません。

jsfiddleの例へのリンクを疑問がで空の画像を置くことで、小さな変化を、必要な.title aようにbackground:url(link to an empty image);あなたがそれを置くのと同じ.title a:hover、それは空の画像を作成して、コードが動作します。

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

これをチェックして くださいhttps://jsfiddle.net/Tobasi/vv8q9hum/

— ムハンマドスレイマン
ソース
まだファイアフォックスやIEで動作していません:(しかし、クロームで問題なく見えます
— モハメッドスレイマン
1

ここにクリスの感動的な投稿があります：

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

私はこれをどうにかして思いついた：

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}
— キャロル・マッケイ
ソース
0

私はこれに少し苦労していました。最初に画像のスタックを重ねて使用しました。3秒ごとに、スタック内の次の画像にアニメーションを付けて、現在の画像をスタックの一番下に投げていました。同時に、上記のアニメーションを使用していました。私の人生でそれを機能させることができませんでした。

このライブラリを使用すると、jquery-backstretchを使用して**動的にサイズ変更されたスライドショー対応の背景画像**を使用できます。

https://github.com/jquery-backstretch/jquery-backstretch

— アキル・カンナ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.