Animation bouton en Css

Version imprimable

1 pièce(s) jointe(s)

Bonjour, :D

Je suis bloqué depuis une semaine avec un bouton que je dois placer. J'ai créé mon bouton, mais lorsque la personne souhaite ajouter "donc clique sur le bouton" une animation dois venir de la droite avec un "petit valider " qui tourne sur lui même. Après plusieurs tentative je n'arrive pas à faire venir l'animation de la droite. Je vous joint la photo de la réplique que je dois faire. Je dois créé l'animation qu'avec du css.

Voici le lien de mes boutons pour mon projet https://anthonydos.github.io/projet3...mer/menu1.html

et en dessous c'est le code que j'ai écris pour faire mes tests.

Pièce jointe 579585
Je vous remercie par avance pour votre aide :) . :D

Le code que j'ai créé pour le bouton et l'animation: ( c'est juste un bouton pour mes tests)
Code:

1 2 3 4 5 6 <div class="btn"> <div class="btn__text">menu numéro 3</div> <div class="btn__fa"> <div class="btn__fa__badge"><i class="far fa-check-circle"></i></div> </div> </div>
Code:

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 .btn { display: flex; width:auto; border-radius: 15px; height: 90px; width: 230px; border: 3px solid black; &:hover .btn__fa{ cursor: pointer; animation-name: btn__fa; animation-duration: 1000ms;} @keyframes btn__fa { 0% { transform:scaleX(0); } 100%{ transform: scaleX(1); } } } .btn__text { display: flex; } .btn__fa { display: flex; margin-left: 52%; background-color: red; width:50%; border-radius:0 12px 12px 0; }

Bonjour,
tout d'abord ton code SCSS ne nous aide pas à voir rapidement si il y a une erreur, il est préférable de poster directement le code CSS.

Pourquoi passer par une animation là où une transformation semble suffisante ?
translate et rotate devrait faire l'affaire.

Voici un exemple simple que je te laisse découvrir :

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation simple</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2091325">
<meta name="description" content="">
<style>
.btn {
  display: flex;
  position: relative;
  align-items: center;
  width: 15em;
  height: 5em;
  border: 1px solid #069;
  overflow: hidden;
  cursor: pointer;
}
.btn .btn-icone {
  position: absolute;
  top: 0;
  left: 100%;
  box-sizing: border-box;
  width: 5em;
  height: 100%;
  border: 4px solid currentColor;
  border-radius: 50%;
  color: #690;
  background-color: #EFD;
  transition: all .5s;
  transform: translate( 0) rotate(180deg);
}
.btn:hover .btn-icone {
  transform: translate( -100%) rotate(0deg);
}
</style>
</head>
<body>
<h1>Animation simple</h1>
<div class="btn">
  Texte du button
  <div class="btn-icone">
    <svg width="100%" viewBox="0 0 16 16" fill="currentColor">
      <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 011.071 1.05l-3.992 4.99a.75.75 0 01-1.08.02L4.324 8.384a.75.75 0 111.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 01.02-.022z"></path>
    </svg>
  </div>
</div>
</body>
</html>

il y a pas mal de cosmétique ;)

23/09/2020, 23h49
tony060

Nosmoking merci beaucoup pour ton aide :D j'ai essayé tellement de chose que je me suis perdu et je me suis compliqué un peu trop la vie. Désoler de te répondre tardivement je n'avais pas vu ton message. Je vais appliquer ton code. Merci encore :D.