CSS3背景画像のトランジション
私は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/
background-imageを遷移させることができます。以下のCSSをimg要素に使用します。
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
これはChrome、Opera、Safariでネイティブにサポートされています。 Firefoxはまだそれを実装していません（ bugzil.la ）。 IEについてよくわからない。
（私が自分で見つけた）解決策は忍者のトリックです、私はあなたに2つの方法を提供することができます：
まず<img>のための "コンテナ"を作る必要があります。それはnormalとhoverの状態を同時に含みます：
<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/ （これを使うのなら「普通」状態はコンテナの最初の子になるか、
nth-child()の順序を変更します。CSS2ソリューション http://jsfiddle.net/eD2zL/2/ （違いはほんの数セレクタです）
基本的に、あなたは "通常の"状態を隠して、あなたがそれらの "ホバー"を表示する必要がありますホバーそれ
そしてそれはそれです、私は誰かがそれが便利だと思うことを願っています。
私は私のために働いた解決策を考え出しました...
リンクのみを含むリストアイテム（またはdiv）があり、これがFacebook上のソーシャルリンク、Twitterなどにリンクしているとしましょう。あなたはこれを行うことができますスプライトの画像を使用している：
<li id="facebook"><a href="facebook.com"></a></li>
「李」の背景をあなたのボタン画像にする
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
次に、リンクの背景画像をボタンのホバー状態にします。これにopacity属性も追加して0に設定します。
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
今必要なのは "a：hover"の下の "opacity"だけで、これを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;
}
私がそれを正しく説明して、それがあなたが退色する背景画像ボタンを持つことを可能にするべきであるならば、少なくともそれが助けになることを願っています！
残念ながら、background-imageでtransitionを使うことはできません。 w3cのアニメート可能なプロパティのリスト をご覧ください。
あなたはbackground-positionでいくつかのトリックをしたいと思うかもしれません。
疑似要素を使用して、私がしたような効果を得ることができます。 Fiddle 。
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>
あなたがjQueryを使うことができるなら、あなたは効果で背景画像を切り替えるために BgSwitcher プラグインを試すことができます、それは非常に使いやすいです。
例えば ：
$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});
そしてあなた自身のエフェクトを追加してください。 エフェクトタイプを追加する を見てください。
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;
}
Salam、この答えはChromeでのみ機能し、IEとFFはカラー遷移をサポートします。
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/
背景画像をアニメートできないことを考慮して、擬似セレクタbeforeおよびafterを使用して、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/
これを試して、アニメーションの背景は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;
}
クリスの感動的な投稿はここにあります：
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);
}
}