Html css中的无限动画有问题吗
我在我正在建设的网站上添加了一个无限新闻代码。我只是有问题，使它不断旋转，而不切断，然后重新启动后，20秒。注意：我使用纯CSS是因为我希望它是一个静态网站 这是我正在使用的测试代码：Html css中的无限动画有问题吗,html,css,Html,Css,我在我正在建设的网站上添加了一个无限新闻代码。我只是有问题，使它不断旋转，而不切断，然后重新启动后，20秒。注意：我使用纯CSS是因为我希望它是一个静态网站 这是我正在使用的测试代码： 正文{ 字体：15px/1.5px Arial，Helvetica，无衬线； 利润率：40像素； 填充：0； 背景#f4； 背景尺寸：封面； 溢出：隐藏； } .动画部分{ 位置：相对位置； 宽度：100%； 高度：100vh； } 部分。滚动{ 宽度：100%； 显示器：flex； } 部分。滚动div{ 颜
正文{
字体：15px/1.5px Arial，Helvetica，无衬线；
利润率：40像素；
填充：0；
背景#f4；
背景尺寸：封面；
溢出：隐藏；
}
.动画部分{
位置：相对位置；
宽度：100%；
高度：100vh；
}
部分。滚动{
宽度：100%；
显示器：flex；
}
部分。滚动div{
颜色：#000；
背景：#fff；
字体大小：20px；
字号：900；
空白：nowrap；
文本转换：大写；
动画：动画40秒线性无限；
动画延迟：-20秒；
}
@关键帧设置动画{
0% {
转换：translateX（100%）
}
100% {
转换：translateX（-100%）
}
}
部分。滚动div：悬停{
动画播放状态：暂停；
}
席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人-席位持有人
持卡人-持卡人-持卡人-持卡人-持卡人-持卡人-持卡人-持卡人-持卡人-持卡人-持卡人-持卡人-持卡人
持票人-持票人-持票人-持票人-持票人-持票人-
@keyframes-ticker{
0% {
变换：translate3d（0,0,0）；
能见度：可见；
}
100% {
转换：translate3d（-100%，0，0）；
}
}
.股票代码包{
宽度：100%；
溢出：隐藏；
左：100%；
框大小：内容框；
}
.股票代码{
显示：内联块；
空白：nowrap；
右：100%；
框大小：内容框；
动画计时功能：线性；
动画迭代次数：无限；
动画持续时间：40秒；
动画名称：ticker；
}
.ticker\u项目{
显示：内联块；
填充：02rem；
字号：2rem；
}
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
占位符-
@keyframes animate {
0% {
transform: translateX(100vw);
visibility: visible;
}
99% {
transform : translateX(-100vw);
visibility: hidden;
}
100% {
transform: translateX(100vw);
visibility: hidden;
}
}
如果站点是静态的，则可以提前完成（即不使用Javascript），分别为每个新闻项设置动画，并计算每个新闻项的动画持续时间和动画延迟，但是更改任何内容都需要重新计算，因此使用Javascript的可维护性可能更好。wdym by static website？前端的Javascript也被认为是静态的。是否需要标记滚动的文本？如果没有，您可以将所有文本放入像title这样的属性中，然后使用带有
content:attr（title）的before&after选择器