我有一些工作正常的代码，它只是添加一个水平新闻源（或我列出的任何信息）它没有闪烁但效果很好但是当我向它添加更多数据时，似乎需要一段时间来加载和速度变化？我有更多的信息要添加到它，但我不想每次更改数据时都不断改变速度。
任何帮助都会很棒，谢谢
@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>
但我想在不花费很多时间的情况下添加更多数据。
由于
答案 0 :(得分：3)
margin-left＆amp;解决方案transform-origin
margin-left＆amp ;;我有一个棘手的解决方案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>
padding-left＆amp;解决方案padding-right
@Jules与padding-left＆amp;提出的解决方案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>