How can I fix the sliding announcement bar code to start on the right and end on the left?

[ScanMe]

hello, i have this code for a sliding announcement bar without any app, however the text is just starting to appear and disappearing where i have the marks. I wanted it to start on the right at the beginning of the page and end on the left at the end of the page.

.announcement-bar {
height: 50px;
overflow: hidden;
position: relative;
}
.announcement-bar p{

position: absolute;
width: 100%;
height: 100%;
margin: 5;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}

[zarri]

Hi, To make it start from the right edge of the page and end at the left edge, you should adjust the initial position to translateX(0%) and the final position to translateX(-100%)
Try this code

.announcement-bar {
height: 50px;
overflow: hidden;
position: relative;
}

.announcement-bar p {
position: absolute;
width: 100%;
height: 100%;
margin: 5;
text-align: center;
/* Starting position */
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
/* Apply animation to this element */
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(0%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(0%); /* Firefox bug fix */
-webkit-transform: translateX(0%); /* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}

[ScanMe]

thank you for your answer. That made the text start sliding where is the red mark.

[zarri · Accepted solution]

Oh sorry, please try this one.

.announcement-bar {
height: 50px;
overflow: hidden;
position: relative;
}

.announcement-bar p {
position: absolute;
width: 100%;
height: 100%;
margin: 5;
text-align: left; /* Align left */
font-size: 18px; /* Font size 18 */
/* Starting position */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}

[ScanMe]

Thank you for the answer again. It is almost perfect. However, the text still doesn't start on the right-hand side as I'd like. Do you think it's possible to do that?

[zarri]

I'm sorry, I can't figure it out 😞

[ScanMe]

no problem, I will take the other solution that is almost perfect