Animation avec un clip-path laisse des "traces"

**Ushuango** · 27/04/2023, 15h54

Bonjour,

je tente une petite animation en css: un arc de cercle rouge d'une certaine taille qui disparaît en 10 secondes ( recouvert par un autre arc de cercle ).
J'ai ajouté une aiguille qui suit la disparition et heureusement, car sans aiguille il reste une petit "filet" rouge de l'arc de cercle !

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>camembert</title>
</head>
<body>
 
    <div class="camembert">
      <div class="aiguille"></div>
      <div class="part part1"></div>
      <div class="part part2"></div>
    </div>
</body>
</html>

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
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.camembert {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
 
.aiguille {
  z-index: 10;
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: linear-gradient(blue 50%, white 50%);
  transform: translate(-50%, 0) rotateZ(30deg);
  transform-origin: center;
  animation: rebour 10s linear forwards;
}
 
.part {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0, 100% 50%, 100% 100%, 50% 100%);
}
 
.part1 {
  background-color: #e74c3c;
  /* border: 1px solid white; */
}
 
.part2 {
  animation: rebour 10s linear forwards;
  background-color: white;
  transform: rotateZ(30deg);
}
 
@keyframes rebour {
  to {
    transform: rotateZ(0deg);
  }
}

Essayez en commentant la div aiguille et la bordure de la classe "part1", qui servent à masquer le problème

Dans ce cas , à la fin de l'animation, vous devriez voir apparaître un beau demi cercle blanc entouré d'une très fine bordure rouge !
Si quelqu'un sait pourquoi on obtient ce résultat et s'il y a un moyen simple de corriger ça, je le remercie d'avance.
Pour l'instant, ma solution me convient, mais je ne m'attendais pas à ce résultat, qui ne me semble pas logique.

Merci d'avance,

Laurent.

**NoSmoking** · 28/04/2023, 17h29

Bonjour,
encore visiblement un problème lié aux contexte d'empilement et la façon dont les couleurs qui se chevauchent seront mélangées.

J'ai ajouté une aiguille qui suit la disparition et heureusement, car sans aiguille il reste une petit "filet" rouge de l'arc de cercle !

Ton autre « pansement » avec l'ajout d'une bordure sur ton élément .part1 semble plus efficace que l'ajout de ton .aiguille.

Pour l'instant, ma solution me convient, mais je ne m'attendais pas à ce résultat, qui ne me semble pas logique.

Un exemple plus simple, enfin je crois :
HTML

Code html :

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

1
2
3
<div class="conteneur">
  <div class="secteur"></div>
</div>

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
:root {
  --delay: 5s;
}
.conteneur {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);  /* on masque la moitié gauche du conteneur */
}
.secteur {
  --deb: 30deg;
  --alpha: calc(180deg + var(--deb));
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: blue;
  animation: animRetour var(--delay) linear forwards;
  transform: rotate(var(--alpha));
  clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);
}
 
@keyframes animRetour {
  to {
    transform: rotate(180deg);
  }
}

c'est une autre approche dérivée de ce que j'avais exploré il y a quelque temps :

↪ Progress-Bar circulaire

Ceci étant, pour les petits angles tu peux faire plus simple !
HTML

Code html :

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

1
2
3
<div class="conteneur no-clip-path">
  <div class="secteur_2"></div>
</div>

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
.conteneur {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);
}
.no-clip-path {
  clip-path: none;
}
.secteur_2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: green;
  animation: animRetour_2 var(--delay) linear forwards;
  clip-path: polygon(50% 0, 78.88% 0, 50% 50%);       /* calcul d'après tg 30° */
}
 
@keyframes animRetour_2 {
  to {
    clip-path: polygon(50% 0, 50% 0, 50% 50%);
  }
}

ici on ne joue qu'avec le clip-path sur l'élément

**Ushuango** · 28/04/2023, 18h36

Bonjour,

merci du retour, comme d'habitude

Le but final de cet exercice est de construire une montre/chronomètre avec des paramètres choisis par un(une) utilisateur(trice) (couleurs, alarme, début de compte à rebours...)
en utilisant de façon optimale html/CSS/Javascript: le maximum en html/CSS et le reste en javascript ( en particulier le code répétitif! ).

Donc j'ai commencé petit: j'ai d'abord fait les petits angles, comme toi !

Il me faudra de toute façon une aiguille, donc autant m'en servir.
Bonne idée les rectangles à la place des cercles pour cacher: moins de points.

Dans ta façon de faire, il y a aussi des traces: un petit trait dans la hauteur sur la fin de l'animation. Heureusement que je mets une aiguille.
Par curiosité, peut-on faire sans ?

Il faut que je retienne l'utilisation des "data-value" et "attr" que tu montres dans le progress-bar circulaire, je n'y pense jamais.

Merci donc,

Laurent.

Animation avec un clip-path laisse des "traces"

Animation en CSS

Discussions similaires

Partager

Partager