CSS动画关键帧计算

我正在制作css文本滑块动画。它最初有5个项目，但我已经删除了一个，所以现在有4个

我的关键帧计算有问题。当最后一个项目滑出，而第一个项目又滑回时，会有一点停顿。当它有5个项目时，一切正常，但删除一个项目影响了时间安排

HTML:

向200多个国家/地区提供服务


同日派递服务


简单的预订工具。


评价很好。

CSS:

html，
身体{
字体系列：“Droid衬线”，衬线；
}
h1{
字体大小：60px；
文本对齐：居中；
}
.内容滑块{
宽度：100%；
高度：360px；
}
.滑块{
高度：320px；
宽度：680px；
保证金：40px自动0；
溢出：可见；
位置：相对位置；
}
.面具{
溢出：隐藏；
高度：320px；
}
.ul{
保证金：0；
填充：0；
位置：相对位置；
}
李先生{
宽度：680px；
高度：320px；
位置：绝对位置；
右：-325px；
列表样式：无；
}
.slider.quote{
字体大小：40px；
字体：斜体；
文本对齐：居中；
}
.li.1{
动画：循环12s线性无限；
}
.2{
动画：循环12秒线性无限；
}
.li.3{
动画：循环3 12s线性无限；
}
.li.4{
动画：循环4 12s线性无限；
}
@关键帧循环{
0% {
右：0px；
}
4% {
右：0px；
}
16% {
右：0px；
不透明度：1；
z指数：0；
}
20% {
右：325px；
不透明度：0；
z指数：0；
}
21% {
右：-325px；
不透明度：0；
z指数：-1；
}
50% {
右：-325px；
不透明度：0；
z指数：-1；
}
92% {
右：-325px；
不透明度：0；
z指数：0；
}
96% {
右：-325px；
不透明度：0；
}
100% {
右：0px；
不透明度：1；
}
}
@关键帧循环2{
0% {
右：-325px；
不透明度：0；
}
16% {
右：-325px；
不透明度：0；
}
20% {
右：0px；
不透明度：1；
}
24% {
右：0px；
不透明度：1；
}
36% {
右：0px；
不透明度：1；
z指数：0；
}
40% {
右：325px；
不透明度：0；
z指数：0；
}
41% {
右：-325px；
不透明度：0；
z指数：-1；
}
100% {
右：-325px；
不透明度：0；
z指数：-1；
}
}
@关键帧循环3{
0% {
右：-325px；
不透明度：0；
}
36% {
右：-325px；
不透明度：0；
}
40% {
右：0px；
不透明度：1；
}
44% {
右：0px；
不透明度：1；
}
56% {
右：0px；
不透明度：1；
z指数：0；
}
60% {
右：325px；
不透明度：0；
z指数：0；
}
61% {
右：-325px；
不透明度：0；
z指数：-1；
}
100% {
右：-325px；
不透明度：0；
z指数：-1；
}
}
@关键帧循环4{
0% {
右：-325px；
不透明度：0；
}
56% {
右：-325px；
不透明度：0；
}
60% {
右：0px；
不透明度：1；
}
64% {
右：0px；
不透明度：1；
}
76% {
右：0px；
不透明度：1；
z指数：-1；
}
80% {
右：325px；
不透明度：0；
z指数：-1；
}
81% {
右：-325px；
不透明度：0；
z指数：-1；
}
100% {
右：-325px；
不透明度：0；
z指数：-1；
}
}

这是我尝试调整的最后一个

cycle4

动画，但我无法实现从最后一个到第一个的平滑过渡

---

如果你想让你的动画保持12秒长，那么你需要意识到，有4个项目，每个项目有3秒的动画时间，动画的每1秒占总动画时间的8.33333%

如果你很难想象这类事情，我建议你建立一个电子表格或做一些计算：

然后，在更改参数（如动画长度和输入/输出时间）时，可以轻松查看关键帧的百分比。不管怎样，下面是一个片段：

html，
身体{
字体系列：“Droid衬线”，衬线；
}
h1{
字体大小：60px；
文本对齐：居中；
}
.内容滑块{
宽度：100%；
高度：360px；
}
.滑块{
高度：320px；
宽度：680px；
保证金：40px自动0；
溢出：可见；
位置：相对位置；
}
.面具{
溢出：隐藏；
高度：320px；
}
.ul{
保证金：0；
填充：0；
位置：相对位置；
}
李先生{
宽度：680px；
高度：320px；
位置：绝对位置；
右：-325px；
列表样式：无；
}
.slider.quote{
字体大小：40px；
字体：斜体；
文本对齐：居中；
}
.li.1{
动画：循环12s线性无限；
}
.2{
动画：循环12秒线性无限；
}
.li.3{
动画：循环3 12s线性无限；
}
.li.4{
动画：循环4 12s线性无限；
}
@关键帧循环{
0% {
右：-325px；
不透明度：0；
z指数：-1；
}
4.2% {
右：0px；
不透明度：1；
z指数：0；
}
20.8% {
右：0px；
不透明度：1；
}
25% {
右：325px；
不透明度：0；
z指数：-1；
}
100% {
右：-325px；
不透明度：0；
}
}
@关键帧循环2{
0% {
右：-325px；
不透明度：0；
}
25% {
右：-325px；
不透明度：0；
}
29.2% {
右：0px；
不透明度：1；
}
45.8% {
右：0px；
不透明度：1；
}
50% {
右：325px；
不透明度：0；
z指数：-1；
}
100% {
右：-325px；
不透明度：0；
z指数：-1；
}
}
@关键帧循环3{
0% {
右：-325px；
不透明度：0；
}
50% {
右：-325px；
不透明度：0；
}
54.2% {
右：0px；
不透明度：1；
}
70.8% {
右：0px；
不透明度：1；
}
75% {
右：325px；
不透明度：0；
z指数：-1；
}
100% {
右：-325px；
不透明度：0；
z指数：-1；
}
}
@关键帧循环4{
0% {
右：-325px；
不透明度：0；
}