banner2.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Bandeau défilant</title>
		<meta name="description" content="Bandeau défilant horizontalement, de facon infinie, géré uniquement en CSS3." />
		<meta name="author" content="Jean-Pierre Pourrez (aka bazooka07)" />
		<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />
		<style>
			body {
				font-size: 16pt;
				font-family: 'Noto Sans', Arial, Sans-Serif;
			}
			@keyframes marqueelike {
				0%, 100% { margin-left: 0; }
	   			99.99% { margin-left: -200%; }
	   		}
			.banner {
				position: relative; width: 100%; height: 2.5rem;
				overflow: hidden; background-color: wheat;
			}
			.banner > span {
				position: absolute; min-width: 100%; display: inline-block;
				white-space: nowrap; padding-top: 0.3rem;
				animation: linear marqueelike 30s infinite;
			}
			.banner > span:first-of-type { left: 0; color: firebrick; }
			.banner > span:nth-of-type(2) { left: 200%; }

			@media screen and (min-width: 64rem) {
				@keyframes marqueelike {
					0%, 100% { margin-left: 0; }
					99.99% { margin-left: -200%; }
				}
				.banner > span {
					animation: linear marqueelike 20s infinite;
				}
				.banner > span:nth-of-type(2) { left: 100%; }
			}
		</style>
</head><body>
	<div class="banner">
		<span>Bienvenue sur le site de l'Académie d'AïkiTaïso de la Côte d'Azur</span>
		<span>Bienvenue sur le site de l'Académie d'AïkiTaïso de la Côte d'Azur</span>
		</div>
		<p>
		    <a href="https://jigsaw.w3.org/css-validator/check/referer">
				<img style="border:0;width:88px;height:31px"
					src="https://jigsaw.w3.org/css-validator/images/vcss"
					alt="Valid CSS!"
				/>
			</a>
		</p>
</body></html>