Bonjour à tous les passionnés.

A force de regarder le code, je ne vois pas où se situe le problème.
Juste un défilement d'un texte horizontalement, mais j'obtiens, par moment, des saccades désagréables.
J'ai fait une vue sur codepen http://codepen.io/JefReb/pen/jyNYpw

Je pense à une longueur du texte ou à un width non adapté, mais je ne comprends pas.

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
html, body {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
body {
	font-family: "Times New Roman", Times, verdana, arial, sans-serif;
	background-color: #fff;
	font-size: 100%;
}
body {
	width: 800px;
	margin: 0 auto;
}
/* Texte défilant */
.content {
	display: block;
	margin: 40px auto;
	padding: 0;
	overflow: hidden;
	position: relative;
	/*	table-layout: fixed;*/
	width: 650px;
	height: 60px;
}
.message {
	display: block;
	margin-left: -100%;
	padding: 0 5px;
	font-size: 2rem;
	text-align: left;
	animation: defilement 20s infinite linear;
}
.message:after {
	content: attr(data-text);
	position: absolute;
	white-space: nowrap;
	padding-left: 10px;
}
 @keyframes defilement {
 0%, 100% {
margin-left:0;
}
 99.99% {
margin-left:-100%;
}
}
et
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
<div class="content"><span class="message">Voici un texte qui doit défiler horizontalement --- </span> </div>
<div class="content"><span class="message" data-text="Voici un texte qui doit défiler horizontalement --- ">Voici un texte qui doit défiler horizontalement --- </span></div>
Le
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
.message:after {
	content: attr(data-text); ... }
a été rajouter pour éviter un temps trop long avant la réapparition du message.
Mais peut-être est-ce ce code qui provoque les saccades.

Une idée serait appréciée. Merci d'avance à tous.