Dernière modification : août 2022
- Votre information ici.
- Votre information 2 ici.
- Votre information 3 ici.
- Votre information 4 ici.
<ul class="marquee">
<li>Votre information ici.</li>
<li>Votre information ici.</li>
<li>Votre information ici.</li>
<li>Votre information ici.</li>
</ul>
*,
*::before,
*::after{
box-sizing: border-box
}
.marquee{
max-width:100%;
width:500px;
height:30px;
margin:4rem auto;
overflow:hidden;
position:relative;
}
.marquee li{
position:absolute;
left:0;
right:0;
height: inherit;
display: grid;
place-items: center;
font-size: 1.25rem;
transform: translateX(100%);
}
.marquee::before{
z-index:1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0))
}
.marquee::after{
z-index:1;
content: '';
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
background-image: linear-gradient(-90deg, white 70%, rgba(255,255,255,0))
}
/*l'animation dure 40s avec delai de 10s entre chaque texte*/
.marquee li:nth-child(n){
animation:defilement 40s ease infinite;
}
/*delai de 10s entre chaque texte*/
.marquee li:nth-child(1){}/*texte 1*/
.marquee li:nth-child(2){animation-delay:10s;-webkit-animation-delay:10s}/*texte 2*/
.marquee li:nth-child(3){animation-delay:20s;-webkit-animation-delay:20s}/*texte 3*/
.marquee li:nth-child(4){animation-delay:30s;-webkit-animation-delay:30s}/*texte 4*/
/*animation*/
@keyframes defilement{0%{transform:translatex(100%)}10%{transform:translatex(0)}20%{transform:translatex(0);opacity:.8}50%{transform:translatex(-100%);opacity:0}100%{transform:translatex(-100%)}}
/*animation webkit*/
@-webkit-keyframes defilement{0%{-webkit-transform:translatex(100%)}10%{-webkit-transform:translatex(0)}20%{-webkit-transform:translatex(0);opacity:.8}50%{-webkit-transform:translatex(-100%);opacity:0}100%{-webkit-transform:translatex(-100%)}}