CSS3-Hintergrundbildübergang

121

Ich versuche, mithilfe des CSS-Übergangs einen "Fade-In-Fade-Out" -Effekt zu erzielen. Aber ich kann das nicht mit dem Hintergrundbild zum Laufen bringen ...

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

Schauen Sie sich das an: http://jsfiddle.net/AK3La/

Nick Zani
quelle

Antworten:

104

Sie können wechseln background-image. Verwenden Sie das folgende CSS für das imgElement:

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

Dies wird von Chrome, Opera und Safari nativ unterstützt. Firefox hat es noch nicht implementiert ( bugzil.la ). Ich bin mir nicht sicher über IE.

Hengjie
quelle
105
background-imageist keine animierbare Eigenschaft ( w3.org/TR/css3-transitions/#animatable-properties ), daher ist Ihre Lösung nicht standardkonform.
TLindig
12
Dies ist keine Lösung - FF und IE unterstützen sie nicht, und wie oben erwähnt, handelt es sich nicht um eine Eigenschaft, die laut Spezifikation unterstützt werden sollte.
Sentinel
Siehe auch für die aktuelle Entwicklung in Fx: bugzilla.mozilla.org/show_bug.cgi?id=546052
Volker E.
2
@ TLindig Es sollte eine animierbare Eigenschaft sein.
3
Die animierbare Eigenschaft ist background, und dies sollte verwendet werden (es funktioniert in Chrome für mich). Vielleicht hat sich die Spezifikation (oder das Impl) geändert, seit die Frage veröffentlicht wurde
fps
37

Die Lösung (die ich selbst gefunden habe) ist ein Ninja-Trick. Ich kann Ihnen zwei Möglichkeiten anbieten:

Zuerst müssen Sie einen "Container" für das erstellen , der gleichzeitig Normal- und Schwebezustände<img> enthält :

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

Grundsätzlich müssen Sie den "normalen" Zustand ausblenden und ihren "Schwebeflug" anzeigen, wenn Sie den Mauszeiger darüber halten

und das wars, ich hoffe jemand findet es nützlich.

Ruffo
quelle
Schöne Lösung. Beim Experimentieren mit der ersten Stichprobe habe ich festgestellt, dass Sie, wenn Sie die Übergangsdauer auf 4 Sekunden erhöhen, einen sehr deutlichen Sprung sehen können, wenn der Z-Index in der Mitte des Übergangs wechselt. Zumindest in Chrome 35 können Sie das Timing des Z-Index-Schalters verschieben und den Übergang bereinigen, indem Sie den Eigenschaftswert in "All 4s Easy , Z-Index 1 ms" ( jsfiddle.net/eD2zL/330 ) ändern .
Neal Stublen
2
@NealS. Du hast recht. Diese Antwort ist 2 Jahre alt, ich würde den Z-Index entfernen, es scheint unnötig. Die Bilder müssen nur in Ordnung sein.
Ruffo
Vielen Dank. Ihre Lösung ist für mich sehr hilfreich.
Slam
Ist ein "verzögertes Laden" möglich, wenn ich diese Lösung verwende?
Daniel
16

Ich habe eine Lösung gefunden, die für mich funktioniert hat ...

Wenn Sie ein Listenelement (oder div) haben, das nur den Link enthält, und sagen wir, dies gilt für soziale Links auf Ihrer Seite zu Facebook, Twitter usw. Wenn Sie ein Sprite-Image verwenden, können Sie dies tun:

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

Machen Sie den Hintergrund des "li" zu Ihrem Schaltflächenbild

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

Machen Sie dann das Hintergrundbild des Links zum Schwebezustand der Schaltfläche. Fügen Sie auch das Deckkraftattribut hinzu und setzen Sie es auf 0.

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

Jetzt brauchen Sie nur noch "Deckkraft" unter "a: hover" und setzen dies auf 1.

#facebook a:hover {
   opacity:1;
}

Fügen Sie die Opazitätsübergangsattribute für jeden Browser zu "a" und "a: hover" hinzu, damit das endgültige CSS ungefähr so ​​aussieht:

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

Wenn ich es richtig erklärt habe, dass Sie eine verblassende Schaltfläche für das Hintergrundbild haben sollten, hoffen Sie, dass es zumindest hilft!

Austin Parrish Thomas
quelle
3
Ich habe auch eine Video-Tutorial-Version davon gemacht. youtube.com/watch?v=6ieR5ApVpr0
Austin Parrish Thomas
Sie sollten, AFAIK, die Übergänge in der Schwebepseudoklasse nicht angeben müssen. Die Übergangsdefinition für den Ankertag-Typ überträgt sich auf das Schwebeverhalten. Sie müssen lediglich die Deckkraft ändern. Beachten Sie, dass dieses Beispiel gut funktioniert, da die Stile direkt auf IDs / Tag-Typen angewendet werden. Wenn Sie dies mit Klassen tun, müssen Sie sicherstellen, dass Sie die Klasse mit dem definierten Übergang nicht hinzufügen und entfernen.
KeithS
15

Leider können Sie den Übergang nicht verwenden background-image, siehe die w3c-Liste der animierbaren Eigenschaften .

Vielleicht möchten Sie ein paar Tricks mit machen background-position.

Olwaro
quelle
13

Sie können Pseudoelemente verwenden, um den gewünschten Effekt zu erzielen, wie ich es in dieser Geige getan habe .

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
quelle
2
Dies funktioniert gut, aber Sie können in zwei Probleme auftreten: 1) , wenn Sie nicht das sehen :afterElement, versuchen Einstellung widthund heightwie 100%statt inherit, 2) , wenn die background-imagetatsächlich in angezeigt Vordergrund , für die Verwendung negativer Index :afterElement:z-index: -1;
Radek Pech
9

Wenn Sie jQuery verwenden können, können Sie das BgSwitcher- Plugin verwenden, um das Hintergrundbild mit Effekten zu wechseln. Es ist sehr einfach zu verwenden.

Zum Beispiel :

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

Fügen Sie Ihren eigenen Effekt hinzu, siehe Hinzufügen von Effekttypen

MaxDhn
quelle
Vielen Dank, ich habe das Problem mit der Animation der Änderung des Tabellenhintergrunds mithilfe dieses Plugins gelöst.
Userlond
4

Versuchen Sie dies, damit der animierte Hintergrund im Web funktioniert, die mobile Hybrid-App jedoch nicht funktioniert

@-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;
}
Hesham Nasser
quelle
4

Da Hintergrundbilder nicht animiert werden können, habe ich ein kleines SCSS-Mixin erstellt, das den Übergang zwischen zwei verschiedenen Hintergrundbildern mithilfe von Pseudo-Selektoren vorher und nachher ermöglicht . Sie befinden sich auf verschiedenen Z-Index-Ebenen. Die vorausgehende beginnt mit der Deckkraft 0 und wird mit dem Schwebeflug sichtbar.

Sie können den gleichen Ansatz auch zum Erstellen von Animationen mit linearen Verläufen verwenden.

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

Jetzt können Sie es einfach mit verwenden

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

Sie können es hier überprüfen: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

Pablo SG Pacheco
quelle
Sehr schöne Lösung! Hat mir ein besseres Verständnis dafür gegeben, wie man die Elementzustände ': vor' und ': nach' als Bonus gut nutzt :-)
joronimo
3

Wenn Animieren opacitykeine Option ist, können Sie auch animieren background-size.

Zum Beispiel habe ich dieses CSS verwendet, um a backgound-imagemit einer Verzögerung festzulegen.

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}
schock_one
quelle
Wenn Sie einen Ausblendeffekt von .afterin .beforefür das Hintergrundbild wünschen , müssen Sie das Hintergrundbild in einstellen .before. Andernfalls verschwindet es einfach ohne Animation.
Radek Pech
2

Salam, diese Antwort funktioniert nur in Chrome, da IE und FF den Farbübergang unterstützen.

Sie müssen Ihre HTML-Elemente nicht erstellen, da opacity:0sie manchmal Text enthalten, und Sie müssen Ihre Elemente nicht verdoppeln!.

Die Frage mit dem Link zu einem Beispiel in jsfiddle erforderte eine kleine Änderung, nämlich ein leeres Bild .title awie das background:url(link to an empty image);gleiche einzufügen, aber ein leeres Bild zu .title a:hovererstellen, und der Code funktioniert.

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

Überprüfen Sie dies unter https://jsfiddle.net/Tobasi/vv8q9hum/

Mohammed Suleiman
quelle
Arbeitet immer noch nicht an Fire Fox oder IE :(, sieht aber gut aus in Chrom
Mohammed Suleiman
1

Mit Chris 'inspirierendem Beitrag hier:

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

Ich habe es geschafft, mir Folgendes auszudenken:

#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); 
    }
}
Carol McKay
quelle
0

Dies kann mit einer größeren browserübergreifenden Unterstützung als die akzeptierte Antwort erreicht werden, indem Pseudoelemente verwendet werden, wie in dieser Antwort veranschaulicht: https://stackoverflow.com/a/19818268/2602816

vaer-k
quelle
0

Ich hatte eine Weile damit zu kämpfen, ich benutzte zuerst einen Stapel Bilder übereinander und alle drei Sekunden versuchte ich, zum nächsten Bild im Stapel zu animieren und das aktuelle Bild auf den Boden des Stapels zu werfen. Gleichzeitig habe ich Animationen wie oben gezeigt verwendet. Ich konnte es nicht für mein Leben zum Laufen bringen.

Sie können diese Bibliothek verwenden, die ein dynamisch skaliertes, Diashow-fähiges Hintergrundbild mit jquery-backstretch ermöglicht.

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

Akhil Khanna
quelle