Relancer une grande animation

**Sergio_zero** · 01/03/2022, 19h17

Bonjour à tous et à toutes,
J'aurais besoins de votre aide pour me dire comment je pourrais rejouer une grande animation.
Je dis grande animation car l'animation global contient en faite plusieurs animation.
Pour le moment j'utilise la balise meta refresh mais c'est déguelasse.
voici pour voir un petit bout lien code open
Voici un petit bout de mon animation

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
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
.senario_2_st0{fill:#B2442F;}
.senario_2_st2{fill:#F39545;}
.senario_2_st3{fill:#FDE854;}
.senario_2_st4{fill:#7B3246;}
.senario_2_st5{fill:#81C3CF;}
.senario_2_st6{fill:#F39644;}
.senario_2_st7{fill:#FAE954;}
.senario_2_st8{fill:#CA5074;}
.senario_2_st9{fill:#81C3D0;}
.senario_2_st10{fill:#81C4CE;}
.senario_2_st11{fill:#F8EC54;}
.senario_2_st12{fill:#F19842;}
.senario_2_st13{fill:#C64B6C;}
.senario_2_st14{fill:#80C4D0;}
.senario_2_st15{fill:none;stroke:#fff;stroke-miterlimit:10;}
#mac_scenario2,#ipad_scenario2,#iphone_scenario2,#trace1_scenario2,#trace2_scenario2 {opacity:0;}
#mac_scenario2,#ipad_scenario2,#iphone_scenario2{
	transform-origin: center;
	animation-duration:1ms,1000ms,1000ms;
	animation-timing-function: linear,linear,ease-out;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
#mac_scenario2{
	animation-delay:3000ms,3000ms,5500ms;
	animation-name:apparition,placement_ordi,bubble_anim;
}
#ipad_scenario2{
	transform: translateX(-40%);
	animation-delay:4000ms,4000ms,5750ms;
	animation-name: apparition,placement_ipad,bubble_anim;
}
#iphone_scenario2{
	transform: translateX(-20%);
	animation-delay:5000ms,5000ms,6000ms;
	animation-name: apparition,placement_iphone,bubble_anim;
}
@keyframes bubble_anim{
	0%{transform:scale(1);}
    50%{transform:scale(1.1);}
	100%{transform:scale(1);}
}
#trace1_scenario2,#trace2_scenario2 {
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
#trace1_scenario2 {
	animation-duration:1ms,900ms;
	animation-delay:4000ms,4000ms;
	stroke-dasharray:550;
	stroke-dashoffset: 550;
	animation-name: apparition,let1;
}
#trace2_scenario2 {
	animation-duration:1ms,1s;
	animation-delay:5000ms,5000ms;
	stroke-dasharray:250;
	stroke-dashoffset: 250;
	animation-name: apparition,let2;
}
@keyframes let1 {
  from {
    stroke-dashoffset: 550;
  }
  to {
    stroke-dashoffset:1100;
  }
}
@keyframes let2 {
  from {
    stroke-dashoffset: 250;
  }
  to {
    stroke-dashoffset: 500;
  }
}
@keyframes apparition{
    0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes placement_ordi{
    0%{transform: translateX(50%);}
	100% {transform: translateX(0%);}
}
@keyframes placement_ipad{
    0%{transform: translateX(-40%);}
	100% {transform: translateX(0%);}
}
@keyframes placement_iphone{
    0%{transform: translateX(-20%);}
	100% {transform: translateX(0%);}
}

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
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 960 540" xml:space="preserve">
  <rect y="332.9" class="senario_2_st0" width="960" height="206.7"/>
	<g id="iphone_scenario2">
		<g>
			<path class="coul_st38" d="M761.7,394.9c-1.5,0-2.9-1.3-2.9-2.9V291c0-1.5,1.3-2.9,2.9-2.9h41.9c1.5,0,2.9,1.3,2.9,2.9V392
				c0,1.5-1.3,2.9-2.9,2.9H761.7z"/>
			<path d="M803.6,289.1c1.1,0,1.9,0.8,1.9,1.9V392c0,1.1-0.8,1.9-1.9,1.9h-41.9c-1.1,0-1.9-0.8-1.9-1.9V291c0-1.1,0.8-1.9,1.9-1.9
				H803.6 M803.6,287.2h-41.9c-2.1,0-3.8,1.7-3.8,3.8V392c0,2.1,1.7,3.8,3.8,3.8h41.9c2.1,0,3.8-1.7,3.8-3.8V291
				C807.4,289,805.7,287.2,803.6,287.2L803.6,287.2z"/>
		</g>
		<rect x="761.7" y="292" class="senario_2_st11" width="41.9" height="7.6"/>
		<rect x="761.7" y="303.4" class="senario_2_st12" width="41.9" height="7.6"/>
		<rect x="761.7" y="314.9" class="senario_2_st13" width="41.9" height="3.8"/>
		<rect x="761.7" y="322.5" class="senario_2_st14" width="41.9" height="19"/>
		<rect x="761.7" y="345.3" class="senario_2_st14" width="41.9" height="19"/>
		<rect x="761.7" y="368.8" width="41.9" height="2.9"/>
		<rect x="761.7" y="375" width="41.9" height="2.9"/>
		<rect x="761.7" y="381.3" width="41.9" height="2.9"/>
		<rect x="761.7" y="387.8" width="41.9" height="2.9"/>
	</g>
	<g id="ipad_scenario2">
		<g>
			<path class="coul_st38" d="M555.4,393.9c-2.7,0-4.8-2.1-4.8-4.8V223.4c0-2.7,2.1-4.8,4.8-4.8h125.7c2.7,0,4.8,2.1,4.8,4.8v165.7
				c0,2.7-2.1,4.8-4.8,4.8H555.4z"/>
			<path d="M681.1,219.6c2.1,0,3.8,1.7,3.8,3.8v165.7c0,2.1-1.7,3.8-3.8,3.8H555.4c-2.1,0-3.8-1.7-3.8-3.8V223.4
				c0-2.1,1.7-3.8,3.8-3.8H681.1 M681.1,217.7H555.4c-3.2,0-5.7,2.5-5.7,5.7v165.7c0,3.2,2.5,5.7,5.7,5.7h125.7
				c3.2,0,5.7-2.5,5.7-5.7V223.4C686.8,220.2,684.4,217.7,681.1,217.7L681.1,217.7z"/>
		</g>
		<g>
			<rect x="557.5" y="225.9" class="senario_2_st6" width="91.8" height="14.9"/>
			<rect x="652.8" y="225.9" class="senario_2_st7" width="26.5" height="14.9"/>
			<rect x="557.5" y="245.3" class="senario_2_st8" width="121.7" height="11.4"/>
			<rect x="557.5" y="261.3" class="senario_2_st5" width="121.7" height="43.6"/>
			<rect x="557.5" y="309.7" class="senario_2_st9" width="34.5" height="52.8"/>
			<rect x="598.9" y="309.7" class="senario_2_st5" width="34.5" height="52.8"/>
			<rect x="557.5" y="367" class="senario_2_st10" width="121.7" height="20.8"/>
			<rect x="640.2" y="309.7" width="39" height="4.6"/>
			<rect x="640.2" y="321.7" width="39" height="4.6"/>
			<rect x="640.2" y="333.7" width="39" height="4.6"/>
			<rect x="640.2" y="345.7" width="39" height="4.6"/>
			<rect x="640.2" y="357.9" width="39" height="4.6"/>
		</g>
	</g>
	<g id="mac_scenario2">
		<g>
			<path class="coul_st38" d="M142.7,392.9c-4.8,0-8.6-3.8-8.6-8.6V155.8c0-4.8,3.8-8.6,8.6-8.6h342.7c4.8,0,8.6,3.8,8.6,8.6v228.6
				c0,4.8-3.8,8.6-8.6,8.6H142.7z"/>
			<path d="M485.5,148.2c4.2,0,7.6,3.4,7.6,7.6v228.6c0,4.2-3.4,7.6-7.6,7.6H142.7c-4.2,0-7.6-3.4-7.6-7.6V155.8
				c0-4.2,3.4-7.6,7.6-7.6H485.5 M485.5,146.3H142.7c-5.3,0-9.5,4.4-9.5,9.5v228.6c0,5.3,4.4,9.5,9.5,9.5h342.7
				c5.3,0,9.5-4.4,9.5-9.5V155.8C495,150.7,490.7,146.3,485.5,146.3L485.5,146.3z"/>
		</g>
		<g>
			<path class="coul_st38" d="M134.1,360.6V155.8c0-4.8,3.8-8.6,8.6-8.6h342.8c4.8,0,8.6,3.8,8.6,8.6v204.8H134.1z"/>
			<path d="M485.5,148.2c4.2,0,7.6,3.4,7.6,7.6v203.8H135.1V155.8c0-4.2,3.4-7.6,7.6-7.6H485.5 M485.5,146.3H142.7
				c-5.3,0-9.5,4.2-9.5,9.5v205.7H495V155.8C495,150.5,490.7,146.3,485.5,146.3L485.5,146.3z"/>
		</g>
		<g>
			<rect x="256" y="433.9" class="coul_st38" width="116.2" height="3.8"/>
			<path d="M371.2,434.8v1.9H257v-1.9H371.2 M373.1,432.9H255.1v5.7h118.1V432.9L373.1,432.9z"/>
		</g>
		<g>
			<path class="coul_st38" d="M264.4,432c10.9-9.1,17-22.1,17.3-36.4c3-0.2,16-0.4,32.4-0.4c16.4,0,29.3,0.2,32.4,0.4
				c0.2,14.1,6.5,27.2,17.3,36.4H264.4z"/>
			<path d="M314.1,396.2c14.9,0,27.2,0.2,31.4,0.4c0.4,13.3,6.1,25.5,15.6,34.5h-94.3c9.7-9,15.2-21.1,15.6-34.5
				C286.9,396.4,299.2,396.2,314.1,396.2 M314.1,394.3c-16.8,0-33.3,0.2-33.3,0.6c0,15.6-7.4,29.3-19,38.1h104.8
				c-11.6-8.8-19-22.5-19-38.1C347.4,394.5,330.7,394.3,314.1,394.3L314.1,394.3z"/>
		</g>
		<g>
			<g>
				<rect x="142.7" y="155.8" class="senario_2_st2" width="253.5" height="32.4"/>
			</g>
			<g>
				<rect x="402.3" y="155.8" class="senario_2_st3" width="83.2" height="32.4"/>
			</g>
			<g>
				<rect x="142.7" y="194.7" class="senario_2_st4" width="342.8" height="17.3"/>
			</g>
			<g>
				<rect x="142.7" y="218.3" class="senario_2_st5" width="342.8" height="71"/>
			</g>
			<g>
				<rect x="142.7" y="298.1" class="senario_2_st5" width="109.5" height="53.9"/>
			</g>
			<g>
				<rect x="260.4" y="298.1" class="senario_2_st5" width="109.5" height="53.9"/>
			</g>
			<g>
				<rect x="378.9" y="299" class="coul_st38" width="105.5" height="1.9"/>
				<polygon points="485.5,298.1 377.9,298.1 377.9,301.9 485.5,301.9"/>
			</g>
			<g>
				<rect x="378.9" y="311.4" class="coul_st38" width="105.5" height="1.9"/>
				<polygon points="485.5,310.5 377.9,310.5 377.9,314.3 485.5,314.3"/>
			</g>
			<g>
				<rect x="378.9" y="323.8" class="coul_st38" width="105.5" height="1.9"/>
				<polygon points="485.5,322.9 377.9,322.9 377.9,326.7 485.5,326.7"/>
			</g>
			<g>
				<rect x="378.9" y="336.2" class="coul_st38" width="105.5" height="1.9"/>
				<polygon points="485.5,335.2 377.9,335.2 377.9,339 485.5,339"/>
			</g>
			<g>
				<rect x="378.9" y="348.6" class="coul_st38" width="105.5" height="1.9"/>
				<polygon points="485.5,347.6 377.9,347.6 377.9,351.4 485.5,351.4"/>
			</g>
		</g>
	</g>
	<path id="trace2_scenario2" class="senario_2_st15" d="M783.6,271c0-52.6-42.7-95.2-95.2-95.2c-20.2,0-39,6.3-54.5,17.1"/>
	<path id="trace1_scenario2" class="senario_2_st15" d="M585.5,193C584.6,88.6,499.6,4.4,395.1,4.4c-75,0-140,43.4-171,106.7"/>
  </svg>

**darkstar123456** · 02/03/2022, 12h39

Bonjour,

De la même façon que vous avez fait les animations d'apparition, il faut faire les animations de disparition et changer les animation-iteration-count de 1 à infinite, plus d'infos : https://developer.mozilla.org/fr/doc...teration-count

Cela implique probablement également de modifier les delay et duration

Relancer une grande animation

Animation en CSS

Vue hybride

Discussions similaires

Partager

Partager