web-dev-qa-db-fra.com

Changer l'image d'arrière-plan avec les animations CSS3

Pourquoi ça ne marche pas? Qu'est-ce que je fais mal?

[~ # ~] css [~ # ~] 

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

[~ # ~] démo [~ # ~]

http://jsfiddle.net/hAGKv/

Merci d'avance!

csscss3background-imagecss-animations
28
Charles Thomason

Image d'arrière-plan ce n'est pas une propriété qui peut être animée - vous ne pouvez pas interpoler la propriété.

Au lieu de cela, essayez de disposer toutes les images les unes sur les autres en utilisant position: absolue, puis animez l'opacité de toutes à 0, sauf celle que vous souhaitez à plusieurs reprises.

24
Rich Bradshaw

Cela fonctionne en Chrome 19.0.1084.41 beta!

Donc, à un moment donné dans le futur, les images clés pourraient vraiment être ... des images!

Vous vivez dans le futur;)

8
Luke Stanley

C'est vraiment rapide et sale, mais cela 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 fait défiler la page - jsFiddle

3
apaul

La fonction de synchronisation linear animera linéairement les propriétés définies. Pour l'image d'arrière-plan, il semble avoir cet effet de fondu/redimensionnement tout en changeant les images de votre animation (je ne sais pas si c'est un comportement standard, j'irais avec l'approche de @Chukie B).

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

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

Voir ceci jsFiddle .

Je ne sais pas non plus s'il s'agit d'un comportement standard, mais lorsque vous dites qu'il n'y aura qu'une seule é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.

2
Thiago Cardoso

J'avais besoin de faire la même chose que vous et j'ai atterri sur votre question. J'ai fini par prendre des informations sur la fonction étapes que j'ai lue dans ici .

JSFiddle de ma solution en action (Notez que cela fonctionne actuellement dans Firefox, je vous laisse ajouter les lignes de navigation, en essayant de garder la solution propre et sans encombrement)

J'ai d'abord créé ne feuille Sprite qui avait deux cadres . Ensuite, j'ai créé le div et l'ai mis en arrière-plan, mais mon div n'est que 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 configurée pour avoir 2 étapes et 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 a mentionné la fonction des étapes mais je pensais que je développerais plus à ce sujet. Des trucs assez simples et impressionnants.

2
Gazillion

Comme indiqué ci-dessus, vous ne pouvez pas modifier les images d'arrière-plan dans l'animation. J'ai trouvé la meilleure solution pour mettre vos images dans une feuille Sprite, puis les animer en changeant la position d'arrière-plan, mais si vous construisez pour mobile, vos feuilles Sprite sont limitées à moins de 1900x1900 px.

1
Chuckie B

Travaille 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;
}
1
drtf

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>
0
Toeur Tenh

Vous pouvez utiliser la propriété de position d'arrière-plan animée et l'image Sprite.

0
BigBadAlien

J'ai dû 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>
0
BlueSix