Skip to content

Instantly share code, notes, and snippets.

@Atlas48
Created April 15, 2019 18:12
Show Gist options
  • Save Atlas48/98fac760e3bf9f3abbb694cf7dfcb372 to your computer and use it in GitHub Desktop.
Save Atlas48/98fac760e3bf9f3abbb694cf7dfcb372 to your computer and use it in GitHub Desktop.
Reimplemetation of deprecated HTML tags as CSS classes
.marquee {
width: 450px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
/* show the marquee just outside the paragraph */
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment