banner.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 type="text/css">
		body {
			font-size: 16pt;
			font-family: 'Noto Sans', Arial, Sans-Serif;
			--banner-width : 200%;
		}
		@media screen and (min-width: 64rem) {
			body { --banner-width: 100%; }
		}
		@keyframes marqueelike {
			0%, 100% { margin-left: 0; }
			99.99% { margin-left: calc(var(--banner-width) * -1); }
		}
		.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: var(--banner-width); }
	</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>
</body></html>