I would like to ask help regarding a CSS transition which works, but is not working when I update the page through a ajax recall. I try to explain: I defined a compass CSS object and a arrow of this compass which should be oriented in the compass as the wind does (wind direction is updated every second). I created a CSS object and the arrow moves to the initial position slowly with the transition effect. Than every seconds there is an update of the wind data and I use a Ajax call to update the page. Consider that the windDirUpdater function is returning the updated wind direction (json['now']). The arrow updates the position but without transition. Can anybody help me please?

I add part of the code which i am using now to define the CSS object and the ajax recall I do Thanks Fabio 

 ruzzi.f@gmail.com

2. 
   
3. .compass {
4. 
   
5. display: block;
6. 
   
7. width: 80px;
8. 
   
9. height: 80px;
10. 
    
11. border-radius: 100%;
12. 
    
13. box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
14. 
    
15. position: relative;
16. 
    
17. color: #555;
18. 
    
19. text-shadow: 1px 1px 1px white;
20. 
    
21. margin: 0 auto;
22. 
    
23.  }
24. 
    
25.  .compass:before {
26. 
    
27. font-weight: bold;
28. 
    
29. position: absolute;
30. 
    
31. text-align: center;
32. 
    
33. width: 100%;
34. 
    
35. content: "";
36. 
    
37. font-size: 14px;
38. 
    
39. top: -2px;
40. 
    
41.  }
42. 
    
43.  .compass .direction {
44. 
    
45. height: 100%;
46. 
    
47. width: 100%;
48. 
    
49. display: block;
50. 
    
51. background: #f2f6f5;
52. 
    
53. background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
54. 
    
55. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
56. 
    
57. background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
58. 
    
59. background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
60. 
    
61. border-radius: 100%;
62. 
    
63.  }
64. 
    
65.  .compass .direction p {
66. 
    
67. text-align: center;
68. 
    
69. margin: 0;
70. 
    
71. padding: 0;
72. 
    
73. position: absolute;
74. 
    
75. top: 50%;
76. 
    
77. left: 0;
78. 
    
79. width: 100%;
80. 
    
81. height: 100%;
82. 
    
83. line-height: 80px;
84. 
    
85. display: block;
86. 
    
87. margin-top: -45px;
88. 
    
89. font-size: 28px;
90. 
    
91. font-weight: bold;
92. 
    
93.  }
94. 
    
95.  .compass .direction p span {
96. 
    
97. display: block;
98. 
    
99. line-height: normal;
100. 
     
101. margin-top: -24px;
102. 
     
103. font-size: 11px;
104. 
     
105. text-transform: uppercase;
106. 
     
107. font-weight: normal;
108. 
     
109.  }
110. 
     
111.  .compass .arrow {
112. 
     
113. width: 100%;
114. 
     
115. height: 100%;
116. 
     
117. display: block;
118. 
     
119. position: absolute;
120. 
     
121. top: 0;
122. 
     
123.  }
124. 
     
125.  .compass .arrow:after {
126. 
     
127. content: "";
128. 
     
129. width: 0;
130. 
     
131. height: 0;
132. 
     
133. border-left: 5px solid transparent;
134. 
     
135. border-right: 5px solid transparent;
136. 
     
137. border-bottom: 10px solid red;
138. 
     
139. position: absolute;
140. 
     
141. top: -6px;
142. 
     
143. left: 50%;
144. 
     
145. margin-left: -5px;
146. 
     
147. z-index: 99;
148. 
     
149.  }
150. 
     
151.  .compass .arrow.nne {
152. 
     
153. transform: rotate(22.5deg);
154. transition: transform 3s;
155. 
     
156.  }
157. 
     
158.  .compass .arrow.ne {
159. 
     
160. transform: rotate(45deg);
161. transition: transform 3s;
162. 
     
163.  }
164. 
     
165.  .compass .arrow.ene {
166. 
     
167. transform: rotate(67.5deg);
168. transition: transform 3s;
169. 
     
170.  }
171. 
     
172.  .compass .arrow.e {
173. 
     
174. transform: rotate(90deg);
175. transition: transform 3s;
176. 
     
177.  }
178. 
     
180. 
     
181. </style>
182. 
     
183. <table style="width:98%;margin:0 auto">
184. 
     
185. <tr>
186. 
     
187. <td>
188. 
     
189. <div class="compass" id="nowDirDiv">
190. 
     
191. 
     
192. <div class="arrow <?php echo strtolower(($direction['now']))?>"></div>
193. 
     
194. </div>
195. 
     
196. <?php echo lang("ora",'c')?>
197. 
     
198. </td>
199. 
     
200. </tr>
201. 
     
203. 
     
204. <script> 
205. 
     
206. windDirupdater();
207. 
     
208. setInterval(function(){ windDirupdater(); }, (5*1000));
209. 
     
210. function windDirupdater(){
211. 
     
212. $.ajax({
213. 
     
214. url : "homepage/blocks/windDir/windDirUpdater.php",
215. 
     
216. dataType : 'json',
217. 
     
218. success : function (json) {
219. 
     
220. html = '<div class="arrow '+json['now']+'"></div>';
221. $("#nowDirDiv").html(html);
222. 
     
223. }
224. 
     
225. })
226. 
     
227. }
228. 
     
229. </script>
230.