Skip to content

Instantly share code, notes, and snippets.

@telbiyski

telbiyski/css marquee

Created March 4, 2020 11:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save telbiyski/72cfab649eacc76d66bcd3647e1b86a0 to your computer and use it in GitHub Desktop.
Save telbiyski/72cfab649eacc76d66bcd3647e1b86a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css marquee
<!DOCTYPE html>
<html>
<body>
<style style="text/css">
.marquee {
height: 50px;
width: 200px;
overflow: hidden;
position: relative;
background: #fefefe;
color: #333;
border: 1px solid #4a4a4a;
}
.marquee:hover p {
width: max-content;
overflow: initial;
text-overflow: initial;
white-space: initial;
animation: scroll-left 2s linear forwards, back 4s 2s linear infinite;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes back {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes scroll-left {
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<p> Marquee in CSS Marquee in CSS Marquee in CSS </p>
</div>
<div class="marquee">
<p> Marquee in CSS </p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment