<div class="Marquee">
<div class="Marquee-content">
<div class="Marquee-start">Thank you for renewing your season tickets!</div>
<div class="Marquee-tag">Test Person 1</div>
<div class="Marquee-tag">Test Person 2</div>
<div class="Marquee-tag">Test Person 3</div>
<div class="Marquee-tag">Test Person 4</div>
<div class="Marquee-tag">Test Person 5</div>
<div class="Marquee-tag">Test Person 6</div>
<div class="Marquee-tag">Test Person 7</div>
<div class="Marquee-tag">Test Person 8</div>
<div class="Marquee-tag">Test Person 9</div>
<div class="Marquee-start">Thank you for renewing your season tickets!</div>
<div class="Marquee-tag">Test Person 1</div>
<div class="Marquee-tag">Test Person 2</div>
<div class="Marquee-tag">Test Person 3</div>
<div class="Marquee-tag">Test Person 4</div>
<div class="Marquee-tag">Test Person 5</div>
<div class="Marquee-tag">Test Person 6</div>
<div class="Marquee-tag">Test Person 7</div>
<div class="Marquee-tag">Test Person 8</div>
<div class="Marquee-tag">Test Person 9</div>
</div>
</div>
body {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
font-size: 16px;
font-family: 'proxima nova', 'open sans', 'Helvetica', sans-serif;
}
.Marquee {
background: #002649;
width: 85vw;
box-sizing: border-box;
padding: 1em;
color: #fff;
font-weight: 200;
display: flex;
align-items: center;
overflow: hidden;
}
.Marquee-content {
display: flex;
animation: marquee 15s linear infinite running;
}
.Marquee-start {
width: 350px;
margin: 0 0.5em;
padding: 0.5em;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.Marquee-tag {
width: 100px;
margin: 0 0.5em;
padding: 0.5em;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
@-moz-keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translate(-50%);
}
}
@-webkit-keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translate(-50%);
}
}
@-o-keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translate(-50%);
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translate(-50%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.