41 lines
1.2 KiB
SCSS
41 lines
1.2 KiB
SCSS
.scroll-left {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.scroll-left p {
|
|
position: absolute;
|
|
width: max-content;
|
|
height: 100%;
|
|
margin: 0;
|
|
text-align: center;
|
|
/* Starting position */
|
|
-moz-transform:translateX(100%);
|
|
-webkit-transform:translateX(100%);
|
|
transform:translateX(100%);
|
|
/* Apply animation to this element */
|
|
-moz-animation: scroll-left 10s linear infinite;
|
|
-webkit-animation: scroll-left 10s linear infinite;
|
|
animation: scroll-left 10s linear infinite;
|
|
}
|
|
/* Move it (define the animation) */
|
|
@-moz-keyframes scroll-left {
|
|
0% { -moz-transform: translateX(100%); }
|
|
100% { -moz-transform: translateX(-100%); }
|
|
}
|
|
@-webkit-keyframes scroll-left {
|
|
0% { -webkit-transform: translateX(100%); }
|
|
100% { -webkit-transform: translateX(-100%); }
|
|
}
|
|
@keyframes scroll-left {
|
|
0% {
|
|
-moz-transform: translateX(100%); /* Browser bug fix */
|
|
-webkit-transform: translateX(100%); /* Browser bug fix */
|
|
transform: translateX(100%);
|
|
}
|
|
100% {
|
|
-moz-transform: translateX(-100%); /* Browser bug fix */
|
|
-webkit-transform: translateX(-100%); /* Browser bug fix */
|
|
transform: translateX(-100%);
|
|
}
|
|
} |