Created
April 15, 2019 18:12
-
-
Save Atlas48/98fac760e3bf9f3abbb694cf7dfcb372 to your computer and use it in GitHub Desktop.
Reimplemetation of deprecated HTML tags as CSS classes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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