CSS/HTML Rotating Text

[NikoloV]

Hello,

i need help with my rotating text code. i have hidden the overflow so the text to dont be misplaced but it does not show all text when rotating (its shortening it). Is there any way to show all text and for it not to be misplaced? Also how i can remove the big gap between the first and the last word? I would like them to be connected together.

Pictures:

Shortening the text - Image on Pasteboard

the code is not showing all text and remove the gap (connect the first and the last word)

pasteboard.co

rotating code - Image on Pasteboard

the code is not showing all text and remove the big gap between the first and last word.

pasteboard.co

.offer1 {
  background-color:#f1f2f4;
 height: 50px;   
overflow:hidden;
 overflow-wrap: normal;
 position: relative;

}
.offer1 h3 {
   font-size: 15px;
 color: black;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);   
 transform:translateX(100%);
 /* Apply animation to this element */   
 -moz-animation: offer1 30s linear infinite;
 -webkit-animation: offer1 30s linear infinite;
 animation: offer1 30s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes offer1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes offer1 {
 0%   { -webkit-transform: translateX(100%); }[ICODE][/ICODE]
100% { -webkit-transform: translateX(-100%); }
}
@keyframes offer1 {
 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%);
 }
}

<div class="offer1">
<h3>ON SALE • SALE • LIMITED TIME OFFER • 15% OFF • 20% OFF • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • LIMITED TIME OFFER </h3>
</div>

Kind Regards,
NikoloV

 

[Antero360]

Hello,

i need help with my rotating text code. i have hidden the overflow so the text to dont be misplaced but it does not show all text when rotating (its shortening it). Is there any way to show all text and for it not to be misplaced? Also how i can remove the big gap between the first and the last word? I would like them to be connected together.

Pictures:

Shortening the text - Image on Pasteboard

the code is not showing all text and remove the gap (connect the first and the last word)

pasteboard.co

rotating code - Image on Pasteboard

the code is not showing all text and remove the big gap between the first and last word.

pasteboard.co

.offer1 {
  background-color:#f1f2f4;
 height: 50px;  
overflow:hidden;
 overflow-wrap: normal;
 position: relative;

}
.offer1 h3 {
   font-size: 15px;
 color: black;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: offer1 30s linear infinite;
 -webkit-animation: offer1 30s linear infinite;
 animation: offer1 30s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes offer1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes offer1 {
 0%   { -webkit-transform: translateX(100%); }[ICODE][/ICODE]
100% { -webkit-transform: translateX(-100%); }
}
@keyframes offer1 {
 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%);
 }
}

<div class="offer1">
<h3>ON SALE • SALE • LIMITED TIME OFFER • 15% OFF • 20% OFF • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • ON SALE • LIMITED TIME OFFER </h3>
</div>

Kind Regards,
NikoloV

Hi there,
Not sure what the issue is. I copied your code and ran it locally on my end, and it seems to be working fine, at least in Chrome. What browser were you testing on?

 

[tomliv]

Worked for me in Arc (Chromium Engine Version 117.0.5938.88) and Firefox 117.0.1. Prettier was confused by the [ICODE] in there. I removed that and fixed Prettier's mistakes and it was fine.