28168 sujets

CSS et mise en forme, CSS3

"background-image:url" non reconnu en keyframes pour téléphone

Bonjour

J'ai un problème de compatibilité d'instructions en CSS.

En fait, j'ai une image de base (en background), qui est remplacée par d'autres. Ca fait une petite animation évolutive (un diaporama en fait !).

Tout fonctionne impeccablement sur ordinateur mais sur téléphone c'est un refus catégorique. Cela n'affiche AUCUNE image.

Le problème semble être que la fonction "background-image: url () " n'est pas comprise par le téléphone quand c'est affecté à un pourcentage d'exécution dans les keyframes.

Test de modification :
j'ai déjà tenté de remplacer le animation-timing-function linear par steps (j'ai testé de 2 à 10 ...) au cas où il n'était pas capable de gérer des transitions compliquées, mais ça ne change rien.

Test comparatif :
sur d'autres pages, j'ai déjà fait des animations en keyframes (pas en steps mais en linear et en ease-and-out) et tout fonctionne bien sur téléphone, mais ce sont des transformations, des zooms, des rotations .... et non pas en utilisant "background-image: url()".

Autres test déjà effectué :
quand je supprime les keyframes, le téléphone affiche bien le background par défaut (mon fichier anim4).

Effet étrange constaté :
selon comme je crée mes keyframes, j'ai parfois juste une image (celle par défaut avant les keyframes) qui s'affiche très rapidement puis disparaît.


C'est donc bien UNIQUEMENT de définir une (ou plusieurs) url d'image dans un keyframe qui est bloquant.

Y-a-t-il un plan B ? Du genre utiliser un webkit dans les instructions ? Ou bien comment changer mes images sans changer le background (uniquement en css, pas de javascript) ?



VOICI LE CODE CSS EN QUESTION :



#image-animee-plan {

background-image: url("../realisations/photos/TRIPLE-avant-anim4-1200x800.webp");
background-size: contain;
animation-name: ANIMATIONDUPLAN;
animation-timing-function: linear;
animation-duration: 16s;
animation-direction: normal;
animation-iteration-count: infinite;
}
@keyframes ANIMATIONDUPLAN {
0%{
background-image: url("../realisations/photos/TRIPLE-avant-anim1-1200x800.webp");}
20%{
background-image: url("../realisations/photos/TRIPLE-avant-anim2-1200x800.webp");}
40%{
background-image: url("../realisations/photos/TRIPLE-avant-anim3-1200x800.webp");}
60%{
background-image: url("../realisations/photos/TRIPLE-avant-anim4-1200x800.webp");}
100%{
background-image: url("../realisations/photos/TRIPLE-avant-anim4-1200x800.webp");}
}



ET VOICI LE CODE HTML CONCERNE :

Dans une section, j'ai parmi d'autres photos .....

<img id="image-animee-plan" src="photos/AAA-image-transparente-1200x800.webp" />

J'ai mis une image transparente pour que cela crée déjà le bon espace dans ma gestion des éléments sur l'écran.
Plutôt que passer par un background url en css, tu devrais mettre tes image dans ton code html, et passer par un object-fit contain pour obtenir le même résultat que ton background url

Puis dans tes keyframes, tu interagis avec tes img, plutôt que les propriétés background url

Sinon, as-tu bien déclaré tes animations correctement ?
@-webkit-keyframes { ... }
@-moz-keyframes { ... }
@keyframes { ... }
Modifié par Pedrothelion (18 Jun 2024 - 13:09)
Modérateur
Bonjour,

Tu peut aussi essayer avec un background multiple et jouer sur des valeurs comme background-size:

ex 
html {
  min-height: 100vh;
  background: 
    url("https://picsum.photos/id/50/500/333"),
    url("https://picsum.photos/id/10/500/333"),
    url("https://picsum.photos/id/20/500/333"),
    url("https://picsum.photos/id/30/500/333"),
    url("https://picsum.photos/id/40/500/333");
  background-repeat: no-repeat;
  background-size: contain, 0%, 0%, 0%, 0%;
  background-position: center;
  animation-name: ANIMATIONDUPLAN;
  animation-timing-function: linear;
  animation-duration: 16s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}
@keyframes ANIMATIONDUPLAN {
  0%,
  20% {
    background-size: contain, 0,  0, 0, 0;
  }
  20%,
  40% {
    background-size: 0, contain, 0, 0, 0;
  }
  40%,
  60% {
    background-size: 0, 0, contain, 0, 0;
  }
  60%,
  80% {
    background-size: 0, 0, 0, contain, 0;
  }
  80%,
  100% {
    background-size: 0, 0, 0, 0, contain;
  }
}


cdt
@gcyrillus :

J'ai testé ta piste des multiples backgrounds, avec des tailles zéro et une seule taille contain à chaque fois. Je ne savais pas qu'on pouvait en avoir plusieurs en url, juste séparés par une virgule. Très intéressant.

Le principe fonctionne parfaitement, mais uniquement sur ordinateur. J'ai même, si jamais c'était la solution, ajouté les versions webkit et moz, mais ça ne change rien.

Sur téléphone, toutes les 8 secondes (j'ai réduit à 8 secondes pour le test), j'ai mon image1 qui apparaît furtivement.

Voici mon code utilisé (pour 4 images) : 



#image-animee-plan {
    background:
        url("../realisations/photos/TRIPLE-avant-anim1-1200x800.webp"),
        url("../realisations/photos/TRIPLE-avant-anim2-1200x800.webp"),
        url("../realisations/photos/TRIPLE-avant-anim3-1200x800.webp"),
        url("../realisations/photos/TRIPLE-avant-anim4-1200x800.webp");
    background-size: contain, 0%, 0%, 0%;
    animation-name: ANIMATIONDUPLAN;
    animation-timing-function: linear;
    animation-duration: 8s;
    animation-direction: normal;
    animation-iteration-count: infinite;
}
@-webkit-keyframes ANIMATIONDUPLAN {
0%,
20%{
    background-size: contain,0,0,0;
    }
20%,
40%{
    background-size: 0,contain,0,0;
    }
40%,
60%{
    background-size: 0,0,contain,0;
    }
60%,
100%{
    background-size: 0,0,0,contain;
    } /* la dernière image doit apparaître plus longtemps, donc 60 à 100% */
}
@-moz-keyframes ANIMATIONDUPLAN {
0%,
20%{
    background-size: contain,0,0,0;
    }
20%,
40%{
    background-size: 0,contain,0,0;
    }
40%,
60%{
    background-size: 0,0,contain,0;
    }
60%,
100%{
    background-size: 0,0,0,contain;
    } /* la dernière image doit apparaître plus longtemps, donc 60 à 100% */
}
@keyframes ANIMATIONDUPLAN {
0%,
20%{
    background-size: contain,0,0,0;
    }
20%,
40%{
    background-size: 0,contain,0,0;
    }
40%,
60%{
    background-size: 0,0,contain,0;
    }
60%,
100%{
    background-size: 0,0,0,contain;
    } /* la dernière image doit apparaître plus longtemps, donc 60 à 100% */
}



C'est donc bien un plan B, mais toujours pour ordinateur, et pas pour téléphone.

Je précise : je teste avec un samsung galaxy sous android, mais il faudra que ce soit aussi compatible Iphone.
@pedrothelion :

Object-fit: contain ? ok, je veux bien.

Mais comment avoir mes multiples photos en html et comment afficher chacun des quatre images séparément avec le css ?

A priori, il faudrait faire la même chose pour que le conseil de cyrillus, et avoir 3 images en valeur 0 (aucune taille), et l'image concernée en contain (taille complète). Ca, j'arrive à le comprendre. Mais comment pointer des images ?

A priori je dirais que dans le code html je devrais avoir quelque chose de ce genre : 

<object type="image/webp" data="../realisations/photos/TRIPLE-avant-anim1-1200x800.webp"></object>


mais alors comment pointer 4 images ? Je donne plusieurs URL à la suite dans le même object ? Je fais comment ?


---
Pour mon ou mes objects, je compte aussi attribuer un ID, pour ça on est d'accord ?

exemple : 

<object id="testanimationplan" type="image/webp" data="../realisations/photos/TRIPLE-avant-anim1-1200x800.webp"></object>



-------
Modérateur
AlexInSi a écrit :
@gcyrillus :
....

C'est donc bien un plan B, mais toujours pour ordinateur, et pas pour téléphone.

Je précise : je teste avec un samsung galaxy sous android, mais il faudra que ce soit aussi compatible Iphone.


C'est surprenant, car c'est le type de téléphone que j'ai et avec lequel ce code fonctionne. Un problème de cache ou la feuille de style n'est pas rechargée ?

Cdt

voici un exemple sur codepen https://codepen.io/gc-nomade/pen/GRaQMNb qui fonctionne sur Android avec les navigateur Samsung, Chrome et Firefox : https://codepen.io/gc-nomade/pen/GRaQMNb avec des images:
* dans un conteneur que l'on déplace par etapes (.diapo),
* en background que l'on déplace(body)
* ou redimensionne(html)
Modifié par gcyrillus (19 Jun 2024 - 11:13)
@AlexInSi

1/ une section en position relative
2/ dans cette section, tes 4 images superposées en position absolute
3/ tu joues avec les opacités de chaque image dans ton animation

c'est pourtant simple

ou sinon tu peux aussi utiliser directement une librairie slider/carousel js comme owl ou splide
Pedrothelion a écrit :
@AlexInSi

1/ une section en position relative
2/ dans cette section, tes 4 images superposées en position absolute
3/ tu joues avec les opacités de chaque image dans ton animation

c'est pourtant simple

ou sinon tu peux aussi utiliser directement une librairie slider/carousel js comme owl ou splide


Je vais tenter des trucs.
Mais l'imbrication n'est pas si facile a priori. Ma photo "animée" fait partie d'autres photos, dans la même section. Et ladite section est organisée automatiquement en flex / wrap pour tous les éléments (les éléments en question ne sont que des images). Ce n'est pas une petite section indépendante de tout le reste avec juste l'image animée.

Quant au javascript, j'ai décidé de l'éviter totalement.

Et si ça ne marche pas à la fin, ce sera une image fixe pour téléphone/tablette, tant pis.

Je reviens une fois que j'ai fait des essais.
Salut,
Ton problème de compatibilité avec l'animation des images de fond sur mobile peut venir du fait que certains navigateurs mobiles ne gèrent pas correctement l'animation des `background - image` dans les keyframes. Voici une solution alternative :

Plan B : Utiliser `opacity` pour simuler un diaporama d'images en superposant plusieurs éléments `img` et en jouant sur leur visibilité à travers les keyframes.

Voici une solution CSS basée sur l'opacité :

Code HTML

html
<div class="diaporama">
<img src="../realisations/photos/TRIPLE-avant-anim1-1200x800.webp" alt="Image 1" />
<img src="../realisations/photos/TRIPLE-avant-anim2-1200x800.webp" alt="Image 2" />
<img src="../realisations/photos/TRIPLE-avant-anim3-1200x800.webp" alt="Image 3" />
<img src="../realisations/photos/TRIPLE-avant-anim4-1200x800.webp" alt="Image 4" />
</div>


Code CSS

css
.diaporama {
position: relative;
width: 100%;
height: auto;
}

.diaporama img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0;
animation: fadeAnimation 16s linear infinite;
}

.diaporama img:nth-child(1) {
animation-delay: 0s;
}

.diaporama img:nth-child(2) {
animation-delay: 4s;
}

.diaporama img:nth-child(3) {
animation-delay: 8s;
}

.diaporama img:nth-child(4) {
animation-delay: 12s;
}

@keyframes fadeAnimation {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
```

Explication :

- Diaporama: Chaque image est positionnée en absolu dans un conteneur pour les superposer.
- Opacity: L'animation gère la visibilité en jouant sur l'opacité, avec une transition fluide entre les images.
- Keyframes: Chaque image devient visible pour 20 % du temps d'animation et passe à l'image suivante.

Cette méthode est plus compatible avec les navigateurs mobiles.
Administrateur
Smiley ban

upload/1726649829-39-lien-en-douce.jpg

Si une IA veut des jeux de données d'entraînement, je suis dispo. Smiley baille C'est pas à un grammarna... comme moi qu'on la fera Smiley biggol
Ça et le bon vieux bbCode de ce forum alors que les IA actuelles ne causent qu'en Markdown Smiley kneu
Prévenir un modérateur
Répondre au sujet
Aller à