Animation CSS piloté par JavaScript

Bonjour,

J'ai créé un petit script qui me permet de piloter une animation (les pages d'un livre qui se tourne en fonction du clique sur des onglets).

Mon script est partiellement fonctionnel, c'est à dire qu'il marche un peu quand il veux... Je tripatouille pas mal en javascript depuis que je fait un peu d'Ajax mais normalement j'évite d'utiliser du JS pour les animations... Mais ici pas le choix du coup je me confronte a de nouveau soucis.

Je vous donne donc mon script :

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
 
currentValue = 0;
function switch_page(old_page_radio) {
	var old_page = currentValue;
	var new_page = old_page_radio.value;
	currentValue = old_page_radio.value;
	if (old_page > new_page) {
		for (i = old_page-1; i >= new_page; i--) {
			document.getElementById("page_"+i).style.animation="none";
			animation_launch_previous(i, 1+((old_page-i-1)*200));
		}
	} else if (old_page < new_page) {
		for (i = old_page; i < new_page; i++) {
			document.getElementById("page_"+i).style.animation="none";
			animation_launch_next(i, 1+((i-old_page)*200));
		}
	}
}
 
function animation_launch_next(iteration, time) {
	setTimeout(function(){
		document.getElementById("page_"+iteration).style.animation="turn 3s linear"; 
		document.getElementById("page_"+iteration).style.transform="rotate(-180deg)";
		document.getElementById("page_"+iteration).style.top="525px";
		document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.height="0";
		document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.animation="hide_recto 3s linear";
		document.getElementById("page_"+iteration).getElementsByClassName("verso")[0].style.animation="show_verso 3s linear";
	},time);
 
	setTimeout(function(){
		document.getElementById("page_"+iteration).style.zIndex=iteration;
	},1500+time);
}
 
function animation_launch_previous(iteration, time) {
	setTimeout(function(){
		document.getElementById("page_"+iteration).style.animation="turn 3s linear reverse"; 
		document.getElementById("page_"+iteration).style.transform="rotate(0)";
		document.getElementById("page_"+iteration).style.top="25px";
		document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.height="500px";
		document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.animation="show_recto 3s linear";
		document.getElementById("page_"+iteration).getElementsByClassName("verso")[0].style.animation="hide_verso 3s linear";
	},time);
 
	setTimeout(function(){
		document.getElementById("page_"+iteration).style.zIndex=1;
	},1500+time);
}

Merci d'avance si vous pouvez m'aider. Et même dans le cas contraire merci de m'avoir accordé le temps de lire ceci :)