Skip to content

Instantly share code, notes, and snippets.

@AlfredoRamos

AlfredoRamos/marquee.css Secret

Last active Jun 24, 2020
Embed
What would you like to do?
/**
* Simple Marquee
* https://github.com/AlfredoRamos/simple-marquee
* @author Alfredo Ramos <alfredo.ramos@yandex.com>
* @version 1.0.0
* @copyright 2018 Alfredo Ramos
* @license GPL-3.0+
*/
@-webkit-keyframes marquee {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
@keyframes marquee {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
.marquee {
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.marquee > ul {
list-style: none;
}
.marquee > ul > li {
display: inline-block;
}
.marquee-content {
display: inline-block;
-webkit-animation-name: marquee;
animation-name: marquee;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
padding-left: 100%;
}
.marquee-reverse .marquee-content {
animation-direction: reverse;
}
.marquee:hover .marquee-content {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.marquee-speed-sx2 .marquee-content {
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.marquee-speed-fx2 .marquee-content {
-webkit-animation-duration: 7.5s;
animation-duration: 7.5s;
}
.marquee-speed-sx3 .marquee-content {
-webkit-animation-duration: 45s;
animation-duration: 45s;
}
.marquee-speed-fx3 .marquee-content {
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
.marquee-speed-sx4 .marquee-content {
-webkit-animation-duration: 60s;
animation-duration: 60s;
}
.marquee-speed-fx4 .marquee-content {
-webkit-animation-duration: 3.75s;
animation-duration: 3.75s;
}
.marquee-speed-sx5 .marquee-content {
-webkit-animation-duration: 75s;
animation-duration: 75s;
}
.marquee-speed-fx5 .marquee-content {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes marquee{0%{-webkit-transform:translate(0, 0);transform:translate(0, 0)}100%{-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0)}}@keyframes marquee{0%{-webkit-transform:translate(0, 0);transform:translate(0, 0)}100%{-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0)}}.marquee{overflow:hidden;white-space:nowrap;box-sizing:border-box}.marquee>ul{list-style:none}.marquee>ul>li{display:inline-block}.marquee-content{display:inline-block;-webkit-animation-name:marquee;animation-name:marquee;-webkit-animation-duration:15s;animation-duration:15s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;padding-left:100%}.marquee-reverse .marquee-content{animation-direction:reverse}.marquee:hover .marquee-content{-webkit-animation-play-state:paused;animation-play-state:paused}.marquee-speed-sx2 .marquee-content{-webkit-animation-duration:30s;animation-duration:30s}.marquee-speed-fx2 .marquee-content{-webkit-animation-duration:7.5s;animation-duration:7.5s}.marquee-speed-sx3 .marquee-content{-webkit-animation-duration:45s;animation-duration:45s}.marquee-speed-fx3 .marquee-content{-webkit-animation-duration:5s;animation-duration:5s}.marquee-speed-sx4 .marquee-content{-webkit-animation-duration:60s;animation-duration:60s}.marquee-speed-fx4 .marquee-content{-webkit-animation-duration:3.75s;animation-duration:3.75s}.marquee-speed-sx5 .marquee-content{-webkit-animation-duration:75s;animation-duration:75s}.marquee-speed-fx5 .marquee-content{-webkit-animation-duration:3s;animation-duration:3s}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.