Changer L'image de fond avec les Animations CSS3

l'image de Fond n'est pas une propriété qui peut être animé - vous ne pouvez pas l'interpolation de la propriété.

au lieu de cela, essayez d'étaler toutes les images les unes sur les autres en utilisant la position:absolute, puis animez l'opacité de toutes les images à 0 sauf celle que vous voulez à plusieurs reprises.

il fonctionne dans Chrome 19.0.1084.41 bêta!

donc à un moment donné dans le futur, les images clés pourraient vraiment l'être... cadres de!

Vous vivez dans le futur ;)

C'est vraiment rapide et sale, mais il fait le travail: jsFiddle

    #img1, #img2, #img3, #img4 {
    width:100%;
    height:100%;
    position:fixed;
    z-index:-1;
    animation-name: test;
    animation-duration: 5s;
    opacity:0;
}
#img2 {
    animation-delay:5s;
    -webkit-animation-delay:5s
}
#img3 {
    animation-delay:10s;
    -webkit-animation-delay:10s
}
#img4 {
    animation-delay:15s;
    -webkit-animation-delay:15s
}

@-webkit-keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}
@keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}

je travaille sur quelque chose de similaire pour mon site en utilisant jQuery, mais la transition est déclenchée lorsque l'utilisateur défile vers le bas de la page - jsFiddle

linear la fonction timing animera les propriétés définies de façon linéaire. Pour l'image de fond, il semble avoir cet effet de fondu / redimensionnement tout en changeant les cadres de votre animation (pas sûr que ce soit un comportement standard, je suivrais l'approche de @Chukie B).

Si vous utilisez le steps fonction, il s'animera discrètement. Voir la documentation de la fonction timing sur MDN pour plus de détails. Pour votre cas, faire comme ceci:

-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);

voir ceci jsFiddle.

Je ne suis pas sûr que ce soit un comportement standard non plus, mais quand vous dites qu'il n'y aura qu'une étape, cela vous permet de changer le point de départ dans le @keyframes section. De cette façon, vous pouvez définir chaque image de votre animation.

j'ai besoin de faire la même chose que vous et a atterri sur votre question. J'ai fini par faire des recherches sur la fonction steps que j'ai lu de ici.

JSFiddle de ma solution en action (Remarque il travaille actuellement dans Firefox, je vais vous permettent d'ajouter la crossbrowser lignes, en essayant de garder la solution de nettoyage de l'encombrement)

d'Abord j'ai créé une feuille sprite qui avait deux cadres. Puis j'ai créé la div et j'ai mis ça comme fond, mais mon div est de la taille de mon sprite (100px).

<div id="cyclist"></div>

#cyclist {
    animation: cyclist 1s infinite steps(2);
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../images/cyclist-test.png');
    background-repeat: no-repeat;
    background-position: top left;
  }

L'animation est définie à 2 étapes et d'avoir l'ensemble du processus prend 1 seconde.

@keyframes cyclist {
  0% {
    background-position: 0 0; 
   }
  100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
   }
}

Thiago ci-dessus mentionné la fonction steps mais j'ai pensé que je pourrais développer plus sur elle. Des trucs simples et géniaux.

comme indiqué ci-dessus, vous ne pouvez pas changer les images de fond dans l'animation. J'ai trouvé la meilleure solution pour mettre vos images dans une feuille sprite, puis animer en changeant la position de fond, mais si vous construisez pour mobile, vos feuilles sprite sont limités à moins de 1900x1900 px.

vous pouvez utiliser la propriété animée background-position et sprite image.

j'ai besoin de faire la même chose récemment. Voici une implémentation simple

#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

<div id="wrapper">
  <img src="img1.jpg" class="top" style="z-index:2;">
  <img src="img2.jpg" style="z-index:1;">
</div>

Fonctionne pour moi. Notez l'utilisation de background-image pour la transition.

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}

vous pouvez suivre ce code:

#cd{
  position: relative;
  margin: 0 auto;
  height: 281px;
  width: 450px;
}
#cf img{
  left: 0;
  position: absolute;
  -moz-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
  opacity: 0;
}

<div id="cf">
  <img class="button" src="Birdman.jpg" />
  <img src="Turtle.jpg" class="top" />
</div>

je peux les changer en chrome. Ses propriétés CSS-webkit sont simples et efficaces dans Chrome.