Animation CSS ne fonctionne pas sous IE11

**tipa42** · 30/01/2017, 00h16

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 30/01/2017, 13h55

Bonjour,

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.

**tipa42** · 30/01/2017, 14h57

Pourtant ca fonctionne avec google chrome.

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

Merci

**NoSmoking** · 30/01/2017, 19h24

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.

...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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**JefReb** · 31/01/2017, 10h25

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.

**tipa42** · 31/01/2017, 15h02

Bonjour,

Merci de votre réponse.

Je vais l'essayer et vous revenir avec ca

**NoSmoking** · 31/01/2017, 15h05

@JefReb :
Mais comme tu es bien curieux

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

tps_animation = tps_par_image * nbr_images

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

%_etape_1 = tps_fade_in / tps_animation

l'opacité reste à 1 jusqu'à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

%_etape_2 = tps_par_image / tps_animation

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

%_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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>