Jouer une animation plusieurs fois

**niilos** · 19/09/2014, 19h40

Bonjour,
je rencontre un problème.

Je veux une case qui lorsque l'on clique sur "open" s'agrandit et colore son fond en blanc
pas de difficulté jusque là
De même lorsque l'on clique sur "close" la fenêtre retourne à sa taille d'origine
seulement voilà, quand j'ai vu une de ces animations, je ne peux pas en voir une deuxième, c'est à dire que le css passe de l'état 0% de l'animation à l'état 100% sans transition à moins que je ne recharge la page.

Pourquoi ne puis-je pas enchainer les animations?

index.html :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" />
	<title>Test</title>
	<script type="text/javascript">
                function openBloc(num){
                        document.getElementById('bloc'+num).style = "position:absolute; z-index:10; animation: open 1s forwards;";
                }
                function closeBloc(num){
                        document.getElementById('bloc'+num).style = "position:absolute; z-index:2; animation: open 1s reverse forwards;";
                }
        </script>
</head>
<body>
	<div id="cadre1">
		<div id="bloc1">
			<p>
				<a onClick="openBloc('1');">open</a><br />
				<a onClick="closeBloc('1');">close</a>
			</p>
		</div>
	</div>
</body>

style.css :

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
html{
	width:100%;
	height:100%;
}
body{
	width:100%;
	height:100%;
}
 
@keyframes open {
 
  from {
  	height: 50%;
  	width:50%;
  }
 
  to {
    height:90%;
    width:90%;
    background:white;
  }
 
}
 
 
#cadre1{
	width:50%;
	height:50%;
	border:2px red solid;
  background: url("images/1.jpg") no-repeat;
}
 
#bloc1{
	border:1px black solid;
	text-align: justify;
  color:red;
  width:100%;
  height:100%;
 
}

Merci pour votre aide!

Invité · 26/09/2014, 14h02

Bonjour,
=> http://codepen.io/jreaux62/pen/LzqyE

Code css :

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
@keyframes open {
 
  from {
  	height: 50%;
  	width:50%;
  }
 
  to {
    height:90%;
    width:90%;
    background:yellow;
  }
 
}
@keyframes close {
 
  from {
  	height: 90%;
  	width:90%;
  }
 
  to {
    height:50%;
    width:50%;
    background:green;
  }
 
}

Code JavaScript :

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

1
2
3
4
5
6
function openBloc(num){
	document.getElementById('bloc'+num).style = "position:absolute; z-index:10; animation: open 1s forwards;";
}
function closeBloc(num){
	document.getElementById('bloc'+num).style = "position:absolute; z-index:10; animation: close 1s forwards;";
}

Jouer une animation plusieurs fois

Animation en CSS

Discussions similaires

Partager

Partager