Animation CSS ne fonctionne pas sous IE11

Version imprimable

Bonjour a tous.

Je débute en CSS/HTML.

Une simple animation(défilement de trois images sur une même DIV) fonctionne très bien sous chrome mais pas avec IE11.

D'après mes recherches sur le net seules les versions 9 et moins ne sont pas compatibles.

Quelqu'un a t'il une idée c'est quoi le problème?

Merci d'avance.

Voici mon code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
         <title>Diapo</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="diapo1.css" />
    </head>
<body>
  <h1>diapo html</h1>
  <div class="diaporama1"></div>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
.body {
margin: 0px;
padding 0px;
width 100%;
}
 
.diaporama1{
 
	display: inline-block;
        margin: 0 auto;
	width: 400px;
	height: 400px;
        border: 3px solid #333;
        background-image: url("image1.jpg");
 
    	webkit-animation-name :diapo1;
	webkit-animation-duration: 20s;
	webkit-animation-timing-function: linear;
	webkit-animation-iteration-count: infinite;
	webkit-animation-direction: normal;
 
	moz-animation-name :diapo1;
	moz-animation-duration: 20s;
	moz-animation-timing-function: linear;
	moz-animation-iteration-count: infinite;
	moz-animation-direction: normal;
 
	animation-name :diapo1;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
 
@-webkit-keyframes diapo1{
	0%{background-image: url("image1.jpg");}
	33%{background-image: url("image2.jpg");}
    66%{background-image: url("image3.jpg");}
}
 
@-moz-keyframes diapo1{
	0%{background-image: url("image1.jpg");}
	33%{background-image: url("image2.jpg");}
    66%{background-image: url("image3.jpg");}
}
 
@keyframes diapo1{
	0%{background-image: url("image1.jpg");}
	33%{background-image: url("image2.jpg");}
    66%{background-image: url("image3.jpg");}
}

30/01/2017, 13h55
NoSmoking

Bonjour,

Citation:

Quelqu'un a t'il une idée c'est quoi le problème?

la propriété background-image n'est pas candidate aux animations, il te faut changer ton approche.
30/01/2017, 14h57
tipa42

Pourtant ca fonctionne avec google chrome.

c'est quoi que vous préconisez comme approche?

Merci

Citation:

Pourtant ca fonctionne avec google chrome.

Et oui cela peut arriver comme l'inverse d'ailleurs mais suivre les recommandations et un « gage » (enfin presque) de bon fonctionnement inter-navigateurs.

Citation:

...que vous préconisez comme approche?

il peut y en avoir plusieurs (cela dépend de l'imagination de chacun), j'en vois au moins deux rapidement.

• 1st : mettre les images les unes derrières les autres dans un conteneur lui même dans un conteneur en overflow:hidden et faire défiler le conteneur image en jouant sur sa propriété left par exemple.

La structure serait la suivante

Code:

1
2
3
4
5
6
7
<div class="cadre">
  <div class="diapo">
    <img src="...">
    <img src="...">
    <img src="...">
  </div>
</div>

pour l'animation avec 3 images cela pourrait donner

Code:

1
2
3
4
5
6
7
8
9
10
11
@keyframes diapo {
  0%, 33.3% {
    left: 0;
  }
  33.33%, 66.6% {
    left: -100%;
  }
  66.66%, 100% {
    left: -200%;
  }
}

• 2nd : en partant de la même structure HTML on place les images en position:absolute et on joue sur l'opacity pour les faire apparaître/disparaître. Dans ce cas il faut également mettre un delay au lancement des animations.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.diapo img:nth-child(1) {
  animation-delay: 0 s;
}
.diapo img:nth-child(2) {
  animation-delay: 6s;
}
.diapo img:nth-child(3) {
  animation-delay: 12s;
}
 
@keyframes diapo {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  11.11% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  33.33% {
    opacity: 1;
  }
  44.44% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

on en avait parlé dans cette discussion, petit schéma à l'appui.

• bonus : exemple de la mise en oeuvre de ces deux solutions

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>[CSS]Diaporama</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
  background: #FFF;
}
#main {
  max-width: 60em;
  margin: auto;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
.cadre {
  position: relative;
  width: 400px;
  height: 296px;
  margin: 0 5em;
  border: 3px solid #FFF;
  overflow: hidden;
  box-shadow: 1px 1px 20px #888;
}
/**
* DIAPO #1
**/
.diapo-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  animation: diapo-1 18s linear infinite;
}
.diapo-1 img {
  float: left;
}
@keyframes diapo-1 {
  0%, 33.3% {
    left: 0;
  }
  33.33%, 66.6% {
    left: -100%;
  }
  66.66%, 100% {
    left: -200%;
  }
}
/**
* DIAPO #2
**/
.diapo-2 {
  position: relative;
}
.diapo-2 img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: diapo-2 18s linear infinite 0s;
}
.diapo-2 img:nth-child(1) {
  animation-delay: 0 s;
}
.diapo-2 img:nth-child(2) {
  animation-delay: 6s;
}
.diapo-2 img:nth-child(3) {
  animation-delay: 12s;
}
@keyframes diapo-2 {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  11.11% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  33.33% {
    opacity: 1;
  }
  44.44% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>
</head>
<body>
<div id="main">
  <div class="section">
    <h1>Diapo simple</h1>
    <div class="cadre">
      <div class="diapo-1">
        <img src="http://nosmoking.developpez.com/demos/images/_font_d_urle.jpg" alt="">
        <img src="http://nosmoking.developpez.com/demos/images/_chaud_clapier.jpg" alt="">
        <img src="http://nosmoking.developpez.com/demos/images/_carrefour_vassieux.jpg" alt=""> 
      </div>
    </div>
  </div>
  <div class="section">
    <h1>Diapo fondu</h1>  
    <div class="cadre">
      <div class="diapo-2">
        <img src="http://nosmoking.developpez.com/demos/images/_font_d_urle.jpg" alt="">
        <img src="http://nosmoking.developpez.com/demos/images/_chaud_clapier.jpg" alt="">
        <img src="http://nosmoking.developpez.com/demos/images/_carrefour_vassieux.jpg" alt=""> 
      </div>
    </div>
  </div>  
</div>  
</body>
</html>

sûrement à affiner ;)

31/01/2017, 10h25
JefReb

La solution 2 est très intéressante, mais comment calcule-t-on le % de l'animation en fonction du temps (ici 6s).
Car si l'on désire mettre plus de 3 photos, ou changer le temps des secondes, il faut tout recalculer. J'ai essayé jusqu'à 7 et 14 photos, mais ça ne fonctionne pas bien.

Dans la discussion https://www.developpez.net/forums/d1...on-transition/ Il y a un bien shéma qui explique, mais "sans rentrer dans les détails ..." pour les calculs .
Si NoSmocking avait un petit tuto, ce serait super. Merci.
31/01/2017, 15h02
tipa42

Bonjour,

Merci de votre réponse.

Je vais l'essayer et vous revenir avec ca

@JefReb :
Mais comme tu es bien curieux :mrgreen:

Une fois défini
- le temps de l'affichage de l'image (tps_par_image)
- le temps de l'effet du fade IN (tps_fade_in), on considère que cela sera le même temps pour l'extinction de l'image
- le nombre d'images à afficher (nbr_images)
on calcul aisément le temps total de l'animation (tps_animation)

Code:

tps_animation = tps_par_image * nbr_images

la fin de l'étape du fade IN, l'opacité passe à 1, est égale à

Code:

%_etape_1 = tps_fade_in / tps_animation

l'opacité reste à 1 jusqu'à

Code:

%_etape_2 = tps_par_image / tps_animation

la fin du fade OUT, l'opacité passe à 0 est égale à

Code:

%_etape_3 = (tps_par_image + tps_fade_in) / tps_animation

et l'opacité reste à 0 jusqu'à 100%.

Voilà rien de bien sorcier ;)

Fichier de calcul qui pourrait te servir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>Calcul pour diapo fondu</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
  background: #FFF;
}
#main {
  max-width:60em;
  margin: auto;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
fieldset {
  max-width:40em;
  margin: 1em;
  padding: .5em;
}
legend {
  color: #069;
  font-weight: bold; 
}
input {
  font: inherit;
  margin-left: .5em;
}
label {
  display: block;
}
pre {
  margin: 0;
  font: 1em/1.25 "Courier New", monospace;
}
</style>
</head>
<body>
<div id="main">
  <h1>Calcul pour diapo fondu</h1>
  <fieldset>
    <legend>Paramètres</legend>
    <label>Temps par image</label>
    <input type="number" id="tps_par_image" value="">
    <label>Temps du fade in par image</label>
    <input type="number" id="tps_fade_in" value="">
    <label>Nombre images</label>
    <input type="number" id="nbr_images" value="">
    <label>Temps total animation</label>
    <input type="number" id="tps_animation" value="" readonly>
  </fieldset>
  <fieldset>
    <legend>CSS</legend>
    <pre id="css_animation"></pre>
  </fieldset>
</div>
<script>
var oInputs = document.querySelectorAll('input[id]');
/**
*  Attention toutes les incohérences ne sont pas traitées
**/
function majChamps() {
  var _r = {};
  var anim = [];
  var tab = '  ';
  var pour_cent;
  var i;
  var oResultat = document.querySelector('#css_animation');
  // récup. des valeurs  
  for ( i = 0; i < oInputs.length; i += 1) {
    _r[oInputs[i].id] = parseInt(oInputs[i].value, 10) || 0;
  }
  _r.tps_animation = _r.tps_par_image * _r.nbr_images;
  // mise à jour champs
  document.querySelector('#tps_animation').value = _r.tps_animation;
  // plus d'une image nécessaire pour traiter
  if (_r.tps_animation > _r.tps_par_image) { 
    // définition animation
    anim.push('.diaporama {\n  animation: nom-animation ' + _r.tps_animation + 's linear infinite 0s;\n}');
    // définition délai sur image
    for (i = 0; i < _r.nbr_images; i += 1) {
      anim.push('.diaporama img:nth-child(' + (i + 1) + ') { animation-delay: ' + (i * _r.tps_par_image) + 's;}');
    }
    // définition @keyframes
    anim.push('\n@keyframes nom-animation {');
    // étape 0
    anim.push(tab + '0% { opacity: 0;}');
    // étape fade in
    pour_cent = ((_r.tps_fade_in / _r.tps_animation) * 100).toFixed(2);
    anim.push(tab + pour_cent + '% { opacity: 1;}');
    // étape reste affichée
    pour_cent = ((_r.tps_par_image / _r.tps_animation) * 100).toFixed(2);
    anim.push(tab + pour_cent + '% { opacity: 1;}');
    // étape fin fade out
    pour_cent = ((_r.tps_par_image + _r.tps_fade_in) / _r.tps_animation * 100).toFixed(2);
    anim.push(tab + pour_cent + '% { opacity: 0;}');
    // reste non visible
    anim.push(tab + '100% { opacity: 0;}\n}');
  }
  // affiche CSS
  oResultat.textContent = anim.join('\n');
}
// action sur change
for (var i = 0; i < oInputs.length; i += 1) {
  oInputs[i].onchange = majChamps;
}
</script>
</body>
</html>

[EDIT] correction coquille dans génération code CSS, manquait un s à @keyframes

31/01/2017, 15h55
Invité
Bonjour,

les % ne dépendent pas du temps de l'animation, mais juste du nombre d'images.
- 3 images -> 100/3 = 33.33%
- 4 images -> 100/4 = 25%
- 5 images -> 100/5 = 20%
- ...
Au delà... ça n'a plus trop d'intérêt.
Autant utiliser une galerie jQuery "toute-faite".
31/01/2017, 20h56
JefReb

Merci pour vos réponses NoSmocking et Jreaux. Bien que ce topic ne soit pas de mon fait, il est très intéressant.
Je vais m'y remettre.
Je suis d'accord qu'au-dela de 5 images autant passer par une galerie. Mais parfois cela est utile pour 4 ou 5 images.
Encore merci
Jef
31/01/2017, 22h19
JefReb

Génial ce script!:D:D
01/02/2017, 19h38
NoSmoking

@JefReb :
C'est gentil même si je viens de corriger une coquille dans la génération du code CSS.

@jreaux62 :

Citation:

les % ne dépendent pas du temps de l'animation, mais juste du nombre d'images.

Le temps de l'animation dépendant du nombre d'images, mais pas que, on pourrait die que oui quand même.

Néanmoins, dans l’absolu et pour un diapo « brut » c'est vrai … mais dans le cas d’un diapo avec un fondu enchaîné, ou plus généralement avec un effet de transfert, pour connaitre la valeur du % de la fin du fade_IN il faut diviser le %_image par le rapport du temps du fade_IN sur le temps de l’affichage de l’image, et le multiplier par le même rapport pour le fade_OUT, ce qui ne complexifie pas le calcul mais la compréhension de celui-ci.

Il n’est donc plus simplement question du nombre d’images présentent mais bel et bien du temps que l’on souhaite affecter à chaque étapes.

En ce sens il me semble préférable, d’un point de vue pédagogique et pour une meilleur compréhension, d’avoir une référence commune pour les différents calculs et cette référence n’est autre que le temps total de l’animation.

Citation:

Au delà... ça n'a plus trop d'intérêt.
Autant utiliser une galerie jQuery "toute-faite".

Je n'en suis pas persuadé, le code CSS pouvant être intégré facilement même en javascript. C'est un peu comme allez chez ~~Mammouth~~ euh Auchan pour acheter une baguette.

La question qui pourrait se poser est à partir de quand, combien d'images, le diaporama perd de son intérêt et là je n'ai pas de réponses toutes faites.
01/02/2017, 20h28
Invité
@NoSmoking

Citation:

Envoyé par NoSmoking

… mais dans le cas d’un diapo avec un fondu enchaîné, ou plus généralement avec un effet de transfert, ...

Bien vu ;)
Et ton script (que je n'ai pas encore pris le temps d'étudié) semble en effet prometteur et bien conçu. :hola:
Ce qui renforce mon idée qu'on apprend chaque jour, grâce aux intervenants de DVP. ;)
Quels qu'ils soient.

Quant au nombre d'images, ce qui rentre en ligne de compte est :
- leur résolution / taille (durée de téléchargement)
- préload* éventuel
...qui influe(nt) sur la fluidité des transitions...

*Certaines galeries proposent le préload des images "adjacentes" (x avant, x après celle affichée...).
01/02/2017, 21h58
JefReb

@NoSmocking

Citation:

même si je viens de corriger une coquille dans la génération du code CSS

Coquille? où? Je viens de regarder le script, je ne vois pas. Mais il est vrai que le script n'est pas mon fort.
En tout cas j'ai essayé avec plusieurs nombres d'images jusqu'à 14, et le css généré est correct.
En tout cas j'utilise parfois jquery pour faire des galeries, mais cette méthode m'aurait bien aidé parfois.
Sauf qu'avec les galeries, il peut y avoir aussi des effets de fondus, mais il est plus facile d'y mettre du texte ou un titre.