animation webkit ne passe pas sous safari.

**juanpa** · 16/03/2012, 20h57

Bonjour,

j'ai un petit soucis dans ma fonction jquery où j'attribue à un div $('#DIV') via un click un css contenant une animation webkit

Code :

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

1
2
3
4
5
6
7
8
 
@-webkit-keyframes BGsize{
 
	0%{opacity:0;-webkit-transform : scale(0,0);}
	1%{opacity:0.1;-webkit-transform : perspective(600) rotateY(-90deg) rotateZ(-120deg);}
	80%{opacity:0.8;-webkit-transform : scale(1.1,1.1);}
	100%{opacity:1;-webkit-transform : scale(1,1);}
	}

je crée une variable contenant les paramètres de l'animation css

Code :

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

1
2
3
4
5
6
7
8
 
	var cssObj = {
      '-webkit-animation-name' : 'BGsize',
      '-webkit-animation-duration' : '2s',
   	  '-webkit-transform-style' : 'preserve-3d',
	'-webkit-animation-direction' : 'normal',
	'-webkit-animation-iteration-count' : '1'
    }

et ma fonction qui va chercher une autre image à chaque Click

Code :

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

1
2
3
 
 
    $(this).css(cssObj).fadeTo(2000,1);

Alors ça fonctionne sous Chrome ...mais pas sous safari ...

Alors que d'habitudes toutes les animations webkit passe à la perfection sous safari contrairement aux autres navigateurs ...et là c'est la première fois que j'arrive pas à faire fonctionner une animations css sous safari.

Merci.

**Sam31000** · 16/03/2012, 21h35

Salut,

Tu pourrais fournir le code html s'il te plait.

Merci.

**juanpa** · 16/03/2012, 22h07

Voilà le code quasi complet manque juste les fichiers externes...

**Sam31000** · 17/03/2012, 08h44

Salut,

J'ai regardé un peu ton code, et j'ai "élagué" un peu pour rester sur l'essentiel.
En faisant cela, je suis arrivé a un code qui fonctionne sur Chrome et Safari.

Tu peux le tester en appuyant sur le button "Click me" que j'ai placé en haut a droite de la page, voici le code :

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
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
124
125
<html>
<head>
<style>
#BG{
	position:absolute;
	/*background-size:contain;*/
	top:-1px;
	left:-1px;
	width:322px;
	height:482px;
	opacity:.5;
	z-index:1;
	-webkit-transform-style: preserve-3d;
	-webkit-animation-name:BGsize;
	-webkit-animation-duration:2s;
	-webkit-animation-direction:normal;
	-webkit-animation-iteration-count:1;
	}	
 
.BG{
	position:relative;
	-webkit-transform-style: preserve-3d;
	-webkit-animation-name:BGsize;
	-webkit-animation-duration:2s;
	-webkit-animation-direction:normal;
	-webkit-animation-iteration-count:1;
	}
@-webkit-keyframes fadeIn{
 
	from{opacity:0;}
	to{opacity:1;}
 
	}	
 
 
@-webkit-keyframes BGsize{
 
	0%{opacity:0;-webkit-transform:scale(0,0);}
	1%{opacity:0.1;-webkit-transform:perspective(600) rotateY(-90deg) rotateZ(-120deg);}
	80%{opacity:0.8;-webkit-transform:scale(1.1,1.1);}
	100%{opacity:1;-webkit-transform:scale(1,1);}
 
 
	}				
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
<script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
        <script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript" charset="utf-8">
//////////------------------Config Wallpaper-----------------------///////////////////
var meteoDelay = 5000;//delai en ms (5000 = 5s) avant disparition météo
// Table des walls	| Mettre ici le chemin des images de fond.
var a = new Array(["images/img1.jpg"],["images/img2.jpg"],["images/img3.jpg"],["images/img4.jpg"]);
//////////------------------Fin Config Wallpaper-----------------------///////////////////
$(document).ready(function () {
	$("#weather").hide();
	$("#BG").hide();
 
	$("#Forecast").hide();
	var d = new String;
	var e = a.length + 1 ;
	var i = 0;
	var cssObj = {
      '-webkit-animation-name' : 'BGsize',
      '-webkit-animation-duration' : '2s',
   	  '-webkit-transform-style' : 'preserve-3d',
	'-webkit-animation-direction' : 'normal',
	'-webkit-animation-iteration-count' : '1'
    }
 
	$('#Button').click(function () {
 
		if ($("#weather").show = true) {
			$("#Forecast").show(1500)
		} else {
			$("#Forecast").hide()
		}
		$("#weather").toggle("slow");
		$("#Forecast").delay(meteoDelay).fadeToggle("slow");
		$("#weather").delay(meteoDelay).fadeToggle("slow");
	});
 
 
	$('#DayUpdate').bind({click:function () {
 
		d = a[i];
 
    $('#BG').fadeOut( 1000, function(){
 
    $(this).css( 'background-image', 'url("' + d + '")', 'opacity','0.5', cssObj).fadeTo(1000,1);
 
    });
		i++;
		//var h = $('#BG').css('background-image', 'url(' + d + ')').fadeToggle(2000);	
    if (i > e) {$("#BG").hide();i = 0};		
 
        	}
	});
});
(jQuery);
    </script>
    </head>
    <body> 
        <div style="float : right;">
            <input id="Button" type="button"  value="Click me !"/>
            <input id="DayUpdate" type="button"  value="Click me !"/>
        </div>
        <div style=" clear : both;"></div>
        <div id="BG"></div>
        <div id="weather">
            <img id="meteoverlay" src="images/img1.jpg" />
            <div id="WeatherContainer">
                <div id="temp"class="myfont2">9°</div> <img id="weatherIcon" src=" " />
                <div id="TextContainer">
                    <div id="HiLo"><span id="temptxt">Températures</span><span id="hi">Max: 10°</span><br /><span id="lo">Min: 4°</span></div>
 
                    <div id="desc" class="myfont">passages Nuageux</div>
                    <div id="city">Paris</div>
                </div>
            </div>
            <div id="Forecast">
        </div>
    </body>
</html>