Discussion :

[pilan]

Bonjour,

Je suis sur un projet qui est basé que sur du css3 pas de JS ni de Jquery, je souhaite faire disparaitre mon animation au bout de 3000ms, mais lorsque je rajoute un timing animation-duration après la fonction linear cela ne fonctionne pas.
J'ai rajouter un display : none mais ça ne fonctionne pas.

Je souhaite avoir une piste. merci de votre aide.

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
.loader-position {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: white;
}
 
.loader {
  width: 120px;
  height: 120px;
  border: 6px solid var(--color-primary);
  border-radius: 50%;
  border-top-color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
  border-left-color: var(--color-tertiary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: spin 1s linear;
}
@keyframes spin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Code html :

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

1
2
3
4
<div class="loader-position">
      <div class="loader">
 
    </div>

[NoSmoking]

Bonjour,

je souhaite faire disparaitre mon animation au bout de 3000ms

pour que la disparition soit effective et durable il faut au minimum deux choses :

• Que la fin de l'animation soit persistante, il existe pour cela la propriété animation-fill-mode qu'il faut mettre à forwards ;
• Que la propriété soit candidate à l'animation, ce qui n'est pas le cas de display, difficile de faire varier block vers none. Par contre tu peux faire varier l'opacity de 1 vers 0.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.loader {
  /* tes autres déclarations */
  animation: spin 3s linear;
  animation-fill-mode: forwards;
}
@keyframes spin {
  99.999% {
    transform: translate(-50%, -50%) rotate(360deg);
    opacity: 1;
  }
  100% {   /* uniquement vers la fin de l'animation */
    opacity: 0;
  }
}

Ressources :

• Utiliser les animations CSS (sur MDN)
• La propriété animation (sur MDN)

[pilan]

Merci beaucoup de m'avoir répondu, j'ai résolu mon problème en jouant avec 2 keyframes et l'opacité ainsi que le display none.

Je garde quand même ton idée et encore merci d'avoir prit le temps d'y répondre .

Je vais revoir les ressources du bas, merci