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/

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.

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>

• mit CSS3- Selektoren http://jsfiddle.net/eD2zL/1/ (wenn Sie diesen verwenden, ist der "normale" Status das erste Kind Ihres Containers oder ändern Sie die nth-child()Reihenfolge)

• CSS2- Lösung http://jsfiddle.net/eD2zL/2/ (Unterschiede zwischen sind nur einige Selektoren)

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.

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!

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.

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>

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

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

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/

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

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/

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

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

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