为什么添加第三个项目会破坏这个 CSS 关键帧滑块？答案

【问题标题】：Why does adding a third item break this CSS Keyframe slider?为什么添加第三个项目会破坏这个 CSS 关键帧滑块？
【发布时间】：2020-08-13 00:38:50
【问题描述】：

我已尽我所能得到此代码。原来我有两个项目滚动。然后我想添加第三个。然而，当我添加第三个项目时，它把所有东西都扔掉了。我相信我在某处的关键帧计算中遗漏了一些东西。不确定。

我错过了什么？我需要三件、四件或五件，但无论使用什么设备，它们都始终处于中心位置。它们以两个项目完美居中，但如果我添加另一个项目，则不会。

#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}

.header-banner .header-promotion {
background-color:#2abad9;
color:#fff;
padding:16px 0;
text-align:center;
font-size:.875rem;
letter-spacing:.0375rem
}
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}

#ticker-banner.hd-tickerloop2 .hd-loop-container {
display:flex;
align-items:center;
width:200%;
-webkit-animation:tickerloop2 20s infinite;
animation:tickerloop2 15s infinite;
animation-duration:15s
}

#ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd-tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd-loop-container:focus-within {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused
}

#ticker-banner.hd-tickerloop2 .ticker-item {
width:75%;
}
.ticker-item {
font-size:12px;
line-height:1.4em;
color:#fff;
text-decoration:none
}

#ticker-banner.hd-tickerloop2 .ticker-item {
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0 2em
}

@keyframes tickerloop2 {
      0% { transform:translateX(0);    flex-direction:row; }
     40% { transform:translateX(0);    flex-direction:row; }
     50% { transform:translateX(-50%); flex-direction:row; }
89.9999% { transform:translateX(-50%); flex-direction:row; }
     90% { transform:translateX(-50%); flex-direction:row;}
     95% { transform:translateX(0);    flex-direction:row-reverse;}
99.9999% { transform:translateX(-50%); flex-direction:row-reverse;}
    100% { transform:translateX(0);    flex-direction:row;}

}

<div class="header-banner">
    <div class="header-promotion">
        <div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
            <div class="hd-loop-container">
               <div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
               <div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
               <div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
               
            </div>
        </div>
    </div>
</div>

【问题讨论】：

您将不得不动态计算动画关键帧的正确步骤和值，如果您还需要动态数量的项目 - 因为 0 和 @ 的使用987654324@ 翻译值看起来直接连接到它使用两个项目。 100/2 = 50，所以 ... 应用 /x 的数学和逻辑将是你的起点。
嗨 CBroe，谢谢。我昨天确实试过了，但没有用。当我这样做时，我还将宽度为 200% 的线提高到 300% 并且它起作用了，但是第三个项目突然出现并与其他两个项目争吵。

标签： html css flexbox css-animations keyframe

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
#ticker-banner.hd-tickerloop {
    overflow:hidden;
    width:100%
    }

    .header-banner .header-promotion {
    background-color:#2abad9;
    color:#fff;
    padding:16px 0;
    text-align:center;
    font-size:.875rem;
    letter-spacing:.0375rem
    }
    #ticker-banner.hd-tickerloop {
    overflow:hidden;
    width:100%
    }

    #ticker-banner.hd-tickerloop2 .hd-loop-container {
    display:flex;
    align-items:center;
    width:300%;
    -webkit-animation:tickerloop2 20s infinite;
    animation:tickerloop2 15s infinite;
    animation-duration:15s
    }

    #ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd- 
     tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd- 
     loop- 
     container:focus-within {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused
    }

    #ticker-banner.hd-tickerloop2 {
    width:75%;
    margin-right:5%;
    }
    .ticker-item {
    font-size:12px;
    line-height:1.4em;
    color:#fff;
    text-decoration:none
    }
    .ticker-item{
  width:100%;
    }

    #ticker-banner.hd-tickerloop2 .ticker-item {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0 2em
    }

   @keyframes tickerloop2 {
          0% { transform:translateX(5%);    flex-direction:row;}
         40% { transform:translateX(5%);    flex-direction:row; }
         45% { transform:translateX(-30%); flex-direction:row; }
         60% { transform:translateX(-30%); flex-direction:row; }    
         70% { transform:translateX(-63%);    flex-direction:row;}
         100% { transform:translateX(-63%);    flex-direction:row;}

    }
</style>

</head>
<body>

<div class="header-banner">
    <div class="header-promotion">
        <div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
            <div class="hd-loop-container">
               <div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
               <div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
               <div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
               
            </div>
        </div>
    </div>
</div>

</body>
</html>

尝试运行漏洞代码

【讨论】：

谢谢曼格什。那没有用。我将数学更改为 33.33% 并且可行，但第三项现在很快或根本没有出现。我在每个项目的关键帧中都遗漏了一些东西。
你好，告诉我你的预期o/p，我现在会帮助你
用我的 css 更改你所有的 css，因为我在我的系统上进行了测试，它对我来说工作正常
嗨，曼格什。在我回应之前我已经这样做了。您的计算使文本居中无效。你偏离了八分之一英寸。我确实注意到你的文字来自 75%，这不好。它需要像我现在拥有的那样从屏幕外的远处进入。这必须保持响应。此外，如果您观看滑块的工作，您会注意到第一个项目突然拉回。滑块需要平滑循环。重复时不要跳回。说得通？谢谢。
我遇到了问题，只需使用 px 中的间隔以及定义 px 中的宽度