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:

Pasteboard - Uploaded Image

Simple and lightning fast image sharing. Upload clipboard images with Copy & Paste and image files with Drag & Drop

pasteboard.co

Pasteboard - Uploaded Image

Simple and lightning fast image sharing. Upload clipboard images with Copy & Paste and image files with Drag & Drop

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:

Pasteboard - Uploaded Image

Simple and lightning fast image sharing. Upload clipboard images with Copy & Paste and image files with Drag & Drop

pasteboard.co

Pasteboard - Uploaded Image

Simple and lightning fast image sharing. Upload clipboard images with Copy & Paste and image files with Drag & Drop

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.