Texte défilant de droite à gauche

**labarre2002** · 12/03/2023, 15h45

Bonsoir

Je réalise une animation de texte défilant de droite a gauche.

le soucis est que mon texte ne débute pas a l’extrême droite

mon code CSS:

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
 .body{
        height: 100vh;
    }
 
 
    .container{
 
        display: flex;
 
 
       width: 100%;
       overflow: hidden;
      position: absolute;
 
      top: 40%;
      transform: translateY(-50%);
 
      -webkit-text-stroke: 1px  dodgerblue;
      color: transparent;
 
    }
 
.t1,.t2{
    animation: defilement 14s  infinite linear;
    white-space: nowrap;
    font-size:4em;
}
 
 
@keyframes defilement{
from{
transform: translate(0,0);
 
}
 
to{
    transform: translate(-100%,0);
}
}

html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div class="container" dir="ltr">
 
 
 
            <span class="t1">Patate DOUCE &nbsp;</span> 
            <span class="t2">Patate DOUCE &nbsp;</span> 
 
 
    </div>
 
</body>