<section>
<div class="div1">Привет! Я бегущая строка </div>
<div class="div2">Привет! Я бегущая строка </div>
</section>
<style>
section {
display: flex;
overflow-x: hidden;
}
div {
font-size: 70px;
font-size: sans-serif;
line-height: 1.3;
padding: 24px 0;
white-space: nowrap;
display: inline-block;
}
.div1 {
animation: marquee1 20s infinite linear;
animation-delay: -20s;
}
.div2 {
animation: marquee2 20s infinite linear;
animation-delay: -10s;
}
div:after {
content: 'Привет! Я бегущая строка ';
}
@keyframes marquee1 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee2 {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-200%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.