html - CSS动画关键帧重叠

Question

我根本不擅长 css 动画。我正在尝试使用 https://codepen.io/nucliweb/pen/ymedj 中的代码为

标签中的 4 个文本元素设置动画。作为引用。

我希望它们一个接一个地淡入淡出。基本上是一个文本 slider 。因此，我尝试这样做，但不幸的是无法让第 4 个

表现得像第一个 3。我确信这是因为关键帧是为 3 个元素编写的，而我添加了第 4 个，因此导致文本重叠问题。

有人可以更正关键帧值，以便在添加第 4 段时不会发生重叠。HTML

<p class="item-1">All showing good.</p>
<p class="item-2">Until the 4th element is added</p>

<p class="item-3">Because keyframes values are no longer adding up</p>
<p class="item-4"> I created this as I wanted to add this text to end the slider and all hell broke loose </p>

CSS 是: @import url( https://fonts.googleapis.com/css?family=Open+Sans:600 );

body { 
  font-family: 'Open Sans', 'sans-serif';
 color: #cecece;
background: #222;
overflow: hidden;
}

.item-1, 
.item-2, 
.item-3,
.item-4 {
position: absolute;
 display: block;
top: 2em;

width: 60%;

font-size: 2em;

animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

.item-1{
animation-name: anim-1;
}

.item-2{
animation-name: anim-2;
}

.item-3{
animation-name: anim-3;
}
.item-4{
animation-name: anim-4; /*added by me*/
}
  @keyframes anim-1 { /*for anim 1,2 and 3 the code runs flawless.*/
  0%, 8.3% { opacity: 0; }
  8.3%,25% {  opacity: 1; }
  33.33%, 100% { opacity: 0; }
 }

@keyframes anim-2 {
0%, 33.33% {  opacity: 0; }
41.63%, 58.29% {  opacity: 1; }
66.66%, 100% { opacity: 0; }
}

@keyframes anim-3 { /*code is screwed on adding anim-4*/
0%, 66.66% { opacity: 0; }
74.96%, 91.62% {  opacity: 1; }
100% {  opacity: 0; }
}
  @keyframes anim-4 {          /*PLEASE GUIDE ABOUT THE VALUES NEEDED HERE*/
0%, 66.66% { opacity: 0; } /*PREVIOUS VALUES MUST CHANGE /*
74.96%, 91.62% {  opacity: 1; }/*BUT I AM CONFUSED ABOUT THE KEYFRAMES*/
100% {  opacity: 0; }
}

有人可以请提供关键帧值，这样就不会发生重叠。

非常感谢，

Answer 1

在我看来，这是一道纯数学题。您有 X 帧，每个帧有 25% 的时间(即 100%/X)使用 opacity: 0，接下来是 50% 的时间使用 opacity: 1，接下来是 25% 的时间，opacity: 0。

您可以自己进行计算并编写详尽的 calc 以提供更改的帧数，但最初的 8.3%(100% 的 25%/3)随后将变为 100% 的 25%/4(因为你现在有 4 个元素)，或 6.25%。等等。

所以，

.item-1 {
动画名称:anim-1；
}
.item-2 {
动画名称:anim-2；
}
.item-3 {
动画名称:anim-3；
}
.item-4 {
动画名称:anim-4；
}
@keyframes anim-1 {/* 第一季度:0 … 100%/X */
0%, 0% { 不透明度: 0; }
6.25%, 18.75% { 不透明度: 1; }/* 100%/16 … 100%/16 * 3 */
25%, 100% { 不透明度: 0; }
}
@keyframes anim-2 {/* 第二节 */
0%, 25% { 不透明度: 0; }
31.25%, 43.75% { 不透明度: 1; }/* 100%/16 * 5 ... 100%/16 * 7 */
50%, 100% { 不透明度: 0; }
}
@keyframes anim-3 {/* 第三节 */
0%, 50% { 不透明度: 0; }
56.25%, 68.75% { 不透明度: 1; }/* 100%/16 * 9 ... 100%/16 * 11 */
75%, 100% { 不透明度: 0; }
}
@keyframes anim-4 {/* 第四季度:100%/X * (X-1) … 100% */
0%, 75% { 不透明度: 0; }
81.25%, 93.75% { 不透明度: 1; }/* 100%/16 * 13 ... 100%/16 * 15 */
100%, 100% { 不透明度: 0; }
}