Animation éléments SVG avec pseudo-classe

**Sergio_zero** · 12/05/2021, 20h45

Bonjour à tous et à toutes,
J'aurais besoins de vos lumière pour m'aider à faire fonctionner une animation.
J'ai un texte (Dans le 7ème) en svg que je voudrais animer.
Normalement chaque lettre du texte devrais s'agrandir et réduire une à une mais c'est la phrase entière qui subie l'effet.
voici le code du svg

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
<aside>
  <div class="wufoo-ad-wrap">
	 <svg version="1.1" class="wufoo-ad" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 400 150" style="enable-background:new 0 0 400 150;" xml:space="preserve">
<g>
	<path class="wufoo-letter" id="st55" d="M58.4,52.8l0-33.4h14.3c2.3,0,4.1,0.1,5.3,0.4s2.4,0.8,3.3,1.4s1.8,1.6,2.5,2.7s1.3,2.4,1.7,3.9
		c0.6,2.1,0.9,4.2,0.9,6.4c0,2.9-0.4,5.5-1.1,7.9s-1.7,4.3-2.7,5.6s-2.1,2.4-3.3,3.1s-2.6,1.2-4.4,1.6c-1.2,0.2-3.1,0.4-5.7,0.4
		H58.4z M67.1,27.5V45h4.1c1.6,0,2.7-0.2,3.5-0.7c0.8-0.5,1.5-1.5,2.2-3.1c0.7-1.6,1-3.5,1-5.6c0-1.1-0.1-2.2-0.3-3.3
		c-0.2-1-0.6-1.9-1.1-2.7c-0.4-0.6-0.8-1-1.4-1.3c-0.8-0.4-1.9-0.7-3.3-0.7H67.1z"/>
	<path class="wufoo-letter" id="st55" d="M112.7,52.8h-7.9l0.3-5.1c-0.6,1.8-1.6,3.2-3.1,4.2c-1.5,1-3.1,1.5-5,1.5c-1.4,0-2.8-0.3-4-0.9
		s-2.2-1.5-2.8-2.6c-0.7-1.1-1-2.4-1-3.9c0-1.4,0.3-2.6,0.8-3.7s1.3-2,2.2-2.6c1.3-0.9,2.7-1.5,4.3-1.9l4.2-1.1
		c1.8-0.5,2.9-0.9,3.3-1.3c0.4-0.4,0.6-0.8,0.6-1.3c0-0.6-0.3-1.2-0.9-1.6c-0.7-0.6-1.7-0.9-2.9-0.9c-1.6,0-3.3,0.4-5.1,1.1
		c-1.8,0.7-3.5,1.8-5.2,3.4v-7.7c1.7-1.4,3.6-2.5,5.6-3.2c2.1-0.7,4.1-1.1,6.1-1.1c2.3,0,4.3,0.4,6,1.2c1.7,0.8,2.9,1.8,3.5,3
		c0.6,1.2,1,2.9,1,5.1V52.8z M104.7,39.9c-0.3,0.2-0.7,0.5-1.1,0.7c-0.4,0.2-1.1,0.5-2.2,1c-1.7,0.7-2.7,1.3-3.2,1.8
		s-0.7,1.1-0.7,1.7c0,0.8,0.3,1.4,0.8,1.9c0.5,0.5,1.2,0.8,2,0.8c1,0,2-0.5,2.8-1.5c0.8-1,1.4-2.6,1.6-4.8L104.7,39.9z"/>
	<path class="wufoo-letter" id="st55" d="M142.6,52.8h-9.1V36.9c0-1.6-0.3-2.7-0.8-3.3c-0.5-0.6-1.2-0.9-2.2-0.9c-1.1,0-2,0.4-2.7,1.2
		c-0.7,0.8-1.1,1.9-1.1,3.3v15.7h-9.1V24.8h8.7v6.2c0.4-1.4,0.9-2.5,1.5-3.3c0.8-1.1,1.8-2,2.9-2.6s2.5-0.9,4-0.9
		c1.6,0,3.1,0.3,4.4,1s2.2,1.6,2.8,2.9s0.9,2.9,0.9,5V52.8z"/>
	<path class="wufoo-letter" id="st55" d="M147.2,50.9v-8c0.6,1,1.7,1.9,3.3,2.7c1.6,0.8,3.2,1.2,4.8,1.2c1.1,0,1.8-0.2,2.4-0.6s0.8-1,0.8-1.6
		c0-0.4-0.1-0.8-0.3-1.1c-0.1-0.2-0.4-0.4-0.8-0.6c-0.1-0.1-0.9-0.3-2.3-0.7s-2.3-0.6-2.7-0.8c-1.3-0.5-2.2-1-2.9-1.4
		s-1.2-1-1.6-1.6c-0.4-0.6-0.7-1.3-1-2.2c-0.3-0.9-0.4-1.8-0.4-2.8c0-1.9,0.4-3.6,1.2-5.1s2.1-2.7,3.7-3.5c1.7-0.8,3.5-1.2,5.6-1.2
		c1.8,0,3.5,0.3,5.1,0.8c1.5,0.5,2.8,1.2,3.7,2.1v8.3c-0.4-0.5-0.9-1-1.6-1.5c-1.1-0.7-2.2-1.3-3.5-1.6c-0.8-0.2-1.7-0.4-2.7-0.4
		c-1.2,0-2,0.2-2.6,0.7c-0.5,0.4-0.8,1-0.8,1.6c0,0.4,0.1,0.7,0.4,1c0.2,0.3,0.6,0.6,1.2,0.8c0.3,0.1,1.1,0.3,2.4,0.7
		c1.3,0.3,2.2,0.6,2.5,0.7c0.9,0.3,1.6,0.7,2.3,1.1c0.6,0.4,1.2,1,1.6,1.6c0.4,0.6,0.8,1.3,1,2.2c0.2,0.8,0.4,1.7,0.4,2.6
		c0,1.8-0.4,3.5-1.2,5s-2,2.6-3.7,3.4c-1.6,0.8-3.5,1.1-5.6,1.1C153,53.7,150.1,52.8,147.2,50.9z"/>
	<path class="wufoo-letter" id="st56" d="M184.1,18h9.2v34.8h-9.2V18z"/>
	<path class="wufoo-letter" id="st56" d="M222,41.7h-16.3c0.3,1.7,1,3.1,2.2,4.1s2.8,1.4,4.8,1.4c1.7,0,3.3-0.4,4.6-1.1s2.5-1.7,3.4-3.1v6.7
		c-0.9,1.1-2.1,2.1-3.9,2.8c-1.7,0.8-3.7,1.2-5.8,1.2c-2.1,0-4-0.3-5.7-1s-3.2-1.7-4.3-3.1c-1.2-1.4-2-3-2.6-4.9s-0.8-3.9-0.8-6.1
		c0-2.5,0.4-4.8,1.1-6.9c0.5-1.6,1.3-2.9,2.3-4.1c1-1.2,2.2-2.1,3.5-2.7c1.8-0.8,3.8-1.3,6.2-1.3c3.6,0,6.5,1.1,8.5,3.3
		c2,2.2,3.1,5.6,3.1,10.2C222.3,38.8,222.2,40.4,222,41.7z M206,35.5h10.5c-0.2-1.6-0.8-2.7-1.8-3.4c-1-0.7-2.2-1-3.5-1
		c-1.6,0-2.9,0.5-3.9,1.6C206.6,33.3,206.1,34.3,206,35.5z"/>
	<path class="wufoo-letter" id="st57" d="M262.5,18.8v8.8l-13.1,25.3h-8.7l12.4-25.3h-14.4v-8.7H262.5z"/>
	<path class="wufoo-letter" id="st57" d="M280.6,34.2H271c0.2,1,0.6,1.8,1.3,2.4c0.7,0.6,1.7,0.9,2.9,0.9c1,0,1.9-0.2,2.7-0.6s1.5-1,2-1.8v3.9
		c-0.5,0.7-1.3,1.2-2.3,1.7c-1,0.5-2.2,0.7-3.5,0.7c-1.2,0-2.3-0.2-3.4-0.6s-1.9-1-2.6-1.8c-0.7-0.8-1.2-1.8-1.5-2.9
		c-0.3-1.1-0.5-2.3-0.5-3.6c0-1.5,0.2-2.8,0.6-4.1c0.3-0.9,0.8-1.7,1.4-2.4c0.6-0.7,1.3-1.2,2-1.6c1-0.5,2.3-0.8,3.7-0.8
		c2.2,0,3.8,0.7,5,2c1.2,1.3,1.8,3.3,1.8,6C280.8,32.5,280.7,33.4,280.6,34.2z M268.7,19.6h5.3l3.2,3.1h-3.8L268.7,19.6z
		 M271.1,30.5h6.2c-0.1-0.9-0.5-1.6-1-2c-0.6-0.4-1.3-0.6-2.1-0.6c-1,0-1.7,0.3-2.3,0.9C271.5,29.2,271.2,29.8,271.1,30.5z"/>
	<path class="wufoo-letter" id="st57" d="M282.9,40.8V24.2h5v3.5c0.2-0.9,0.4-1.5,0.7-1.9c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.4-0.5c1.3,0,2.3,0.3,3.1,1
		c0.8,0.7,1.2,1.7,1.4,3.2c0.2-0.9,0.6-1.6,1-2.3c0.4-0.6,1-1.1,1.6-1.4c0.7-0.3,1.4-0.5,2.3-0.5c0.6,0,1.2,0.1,1.8,0.3
		c0.5,0.2,1,0.4,1.3,0.7c0.4,0.3,0.7,0.6,0.9,1c0.2,0.4,0.4,0.9,0.5,1.5c0.1,0.5,0.1,1.2,0.1,2.3v11.3h-5.4v-9.7
		c0-0.9-0.1-1.5-0.4-1.9s-0.7-0.5-1.2-0.5c-0.6,0-1.1,0.2-1.5,0.7s-0.6,1.1-0.6,2v9.4h-5.3V31c0-0.9-0.1-1.5-0.4-1.9
		c-0.3-0.3-0.7-0.5-1.3-0.5c-0.4,0-0.8,0.1-1.1,0.3s-0.6,0.5-0.8,0.9c-0.2,0.4-0.3,0.8-0.3,1.3v9.6H282.9z"/>
	<path class="wufoo-letter" id="st57" d="M323.4,34.2h-9.6c0.2,1,0.6,1.8,1.3,2.4c0.7,0.6,1.7,0.9,2.9,0.9c1,0,1.9-0.2,2.7-0.6c0.8-0.4,1.5-1,2-1.8v3.9
		c-0.5,0.7-1.3,1.2-2.3,1.7c-1,0.5-2.2,0.7-3.5,0.7c-1.2,0-2.3-0.2-3.4-0.6s-1.9-1-2.6-1.8c-0.7-0.8-1.2-1.8-1.5-2.9
		s-0.5-2.3-0.5-3.6c0-1.5,0.2-2.8,0.6-4.1c0.3-0.9,0.8-1.7,1.4-2.4s1.3-1.2,2-1.6c1-0.5,2.3-0.8,3.7-0.8c2.2,0,3.8,0.7,5,2
		c1.2,1.3,1.8,3.3,1.8,6C323.6,32.5,323.5,33.4,323.4,34.2z M313.9,30.5h6.2c-0.1-0.9-0.5-1.6-1-2c-0.6-0.4-1.3-0.6-2.1-0.6
		c-1,0-1.7,0.3-2.3,0.9C314.3,29.2,314,29.8,313.9,30.5z"/>
</g>
</svg></div></aside>

et le css qui fait l’animation

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
aside {
  width: 25%;
  min-width: 400px;
  max-width: 500px;
  margin: 25px auto;
}
.wufoo-ad-wrap {
  height: 0;
  padding-top: 100%;
  position: relative;
}
.wufoo-ad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wufoo-letter  {
  animation: elevation 5s ease alternate infinite;
  &:nth-child(2) {
    animation-delay: 0.2s;
  }
  &:nth-child(3) {
    animation-delay: 0.3s;
  }
  &:nth-child(4) {
    animation-delay: 0.4s;
  }
 &:nth-child(5) {
    animation-delay: 0.5s;
  }
  &:nth-child(6) {
    animation-delay: 0.6s;
  }
  &:nth-child(7) {
    animation-delay: 0.7s;
  }
  &:nth-child(8) {
    animation-delay: 0.8s;
  }
  &:nth-child(9) {
    animation-delay: 0.9s;
  }
  &:nth-child(10) {
    animation-delay: 1s;
  }
}
@keyframes elevation {
  90% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
  }
}

Merci d'avance.

**NoSmoking** · 18/05/2021, 17h05

Bonjour,

Code :

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

1
2
3
4
5
6
.wufoo-letter  {
  animation: elevation 5s ease alternate infinite;
  &:nth-child(2) {
    animation-delay: 0.2s;
  }
  /*-- etc --*/

ton code CSS, qui est en fait du SCSS non compilé, n'est donc pas pris en compte.

**Sergio_zero** · 27/05/2021, 18h41

Merci NoSmoking

Animation éléments SVG avec pseudo-classe

Animation en CSS

Discussions similaires

Partager

Partager