纯CSS新闻/资讯提供

Question

I have some code that works fine, it simply adds a horizontal news feed (or any information I list) It works good with no flicker but when I add more data to it, it seems to take a while to load and the speed changes? I have quite a lot more information to add to it but I dont want to keep changing the speed everytime the data is changed.

Any help would be great, thanks

 @keyframes customticker { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } /* Formatting the full-width ticker wrapper background and font color */ #tickerwrap { width: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); color: #fff; } /* Formatting the ticker content background, font color, padding and exit state */ #ticker { display: inline-block; white-space: nowrap; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: customticker; animation-name: customticker; -webkit-animation-duration: 70s; animation-duration: 70s; } 

 <div id="tickerwrap"> <div id="ticker"> Avon <span style="color: #333638"> | </span> Bedfordshire <span style="color: #333638"> | </span> Buckinghamshire <span style="color: #333638"> | </span> Cambridgeshire <span style="color: #333638"> | </span> Cheshire <span style="color: #333638"> | </span> Cleveland <span style="color: #333638"> | </span> Clwyd <span style="color: #333638"> | </span> Cornwall <span style="color: #333638"> | </span> County Antrim <span style="color: #333638"> | </span> County Armagh<span style="color: #333638"> | </span> County Down<span style="color: #333638"> | </span> County Fermanagh<span style="color: #333638"> | </span> C ounty Londonderry<span style="color: #333638"> | </span> County Tyrone <span style="color: #333638"> | </span> Cumbria <span style="color: #333638"> | </span> Derbyshire <span style="color: #333638"> | </span> Devon <span style="color: #333638"> | </span> Dorset <span style="color: #333638"> | </span> Dumfries <span style="color: #333638"> | </span> Galloway <span style="color: #333638"> | </span> Durham <span style="color: #333638"> | </span> Dyfed <span style="color: #333638"> | </span> East Sussex <span style="color: #333638"> | </span> Essex <span style="color: #333638"> | </span> Fife <span style="color: #333638"> | </span> Gloucestershire <span style="color: #333638"> | </span> Grampian <span style="color: #333638"> | </span> Greater Manchester <span style="color: #333638"> | </span> Gwent <span style="color: #333638"> | </span> Gwynedd County <span style="color: #333638"> | </span> Hampshire <span style="color: #333638"> | </span> Herefordshire </div> </div> 

But I want to add more data to it without it taking ages to load.

Thanks

Answer 1

Solution with margin-left & transform-origin

I've got a tricky solution with margin-left & transform-origin .

 @keyframes customticker { 0% { margin-left: 100%; transform: translateX(0); } 100% { margin-left: 0%; transform: translateX(-100%); } } #tickerwrap { width: 100%; overflow: hidden; background-color: black; } #ticker { display: inline-block; color: white; white-space: nowrap; transform-origin: 100% 0; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: customticker; animation-duration: 60s; } #ticker span { color: grey; } 

 <div id="tickerwrap"> <div id="ticker"> Avon <span>|</span> Bedfordshire <span>|</span> Buckinghamshire <span>|</span> Cambridgeshire <span>|</span> Cheshire <span>|</span> Cleveland <span>|</span> Clwyd <span>|</span> Cornwall <span>|</span> County Antrim <span>|</span> County Armagh <span>|</span> County Down <span>|</span> County Fermanagh <span>|</span> County Londonderry <span>|</span> County Tyrone <span>|</span> Cumbria <span>|</span> Derbyshire <span>|</span> Devon <span>|</span> Dorset <span>|</span> Dumfries <span>|</span> Galloway <span>|</span> Durham <span>|</span> Dyfed <span>|</span> East Sussex <span>|</span> Essex <span>|</span> Fife <span>|</span> Gloucestershire <span>|</span> Grampian <span>|</span> Greater Manchester <span>|</span> Gwent <span>|</span> Gwynedd County <span>|</span> Hampshire <span>|</span> Herefordshire </div> </div> 

Solution with padding-left & padding-right

Or the solution proposed by @Jules with padding-left & padding-right .

 @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } #tickerwrap { width: 100%; overflow: hidden; background-color: black; padding-left: 100%; } #ticker { display: inline-block; color: white; white-space: nowrap; padding-right: 100%; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: ticker; animation-duration: 60s; } #ticker span { color: grey; } 

 <div id="tickerwrap"> <div id="ticker"> Avon <span>|</span> Bedfordshire <span>|</span> Buckinghamshire <span>|</span> Cambridgeshire <span>|</span> Cheshire <span>|</span> Cleveland <span>|</span> Clwyd <span>|</span> Cornwall <span>|</span> County Antrim <span>|</span> County Armagh <span>|</span> County Down <span>|</span> County Fermanagh <span>|</span> County Londonderry <span>|</span> County Tyrone <span>|</span> Cumbria <span>|</span> Derbyshire <span>|</span> Devon <span>|</span> Dorset <span>|</span> Dumfries <span>|</span> Galloway <span>|</span> Durham <span>|</span> Dyfed <span>|</span> East Sussex <span>|</span> Essex <span>|</span> Fife <span>|</span> Gloucestershire <span>|</span> Grampian <span>|</span> Greater Manchester <span>|</span> Gwent <span>|</span> Gwynedd County <span>|</span> Hampshire <span>|</span> Herefordshire </div> </div>