Bonjour,
j'essaye de faire une animation en CSS. Il s'agit d'un bouton qui se déplace de droite à gauche et vient donc "pousser" une div qui se trouve donc à gauche. Cette div contient du texte et lorsqu’elle rétrécit suffisamment le texte est tronqué est les 3 points apparaissent.

J'ai essayé avec flex en suivant les indications de ce site https://meetrix.io/blog/posts/shrink...dd-3-dots.html avec d'autres remarques que j'ai pu glaner à droite et à gauche mais j'arrive toujours pas à avoir cet effet de texte qui "disparait" au fur et à mesure que le bouton avance.

Merci pour votre aide

P.S dans le bouton il y a une icône animée mais là n'est pas le problème

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
<div class="menus">
  <div class="namePlat">
    <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
    <p>Lorem ipsumLorem ipsumLorem ipsum</p>
  </div>
 
  <div class="price">
    <p>25€</p>
  </div>
  <div class="box">
    <div class="check">
      <img src="img/check24.png" alt="#">
    </div>
  </div>
 
</div>

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
.price {
  position: absolute;
  right: 2em;
  top: 2em;
  width: 10%;
  transform: translateX(0);
  transition: transform 1000ms;
}
 
.box {
  transform-origin: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background-color: yellow;
  border-radius: 0 20px 20px 0;
  color: green;
  transform: scaleX(0);
  transition: transform 1000ms;
  .check {
    position: absolute;
    right: 30%;
    top: 35%;
    margin: auto;
    transform: rotate(-360deg);
    transition: transform 1500ms ease-in-out;
  }
}
 
.namePlat {
  min-width: 0;
  white-space: nowrap;
  p,
  h3 {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
 
.menus {
  display: flex;
  cursor: pointer;
  &:hover>.box {
    transform: scaleX(1);
    .check {
      transform: rotate(0deg);
    }
  }
  &:hover>.price {
    flex-shrink: 0;
    transform: translateX(-5em);
  }
  &:hover>.namePlat {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    p,
    h3 {
      max-width: 400px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}