CSS动画关键帧重叠

Question

我根本不擅长 CSS 动画。我正在尝试为

中的 4 个文本元素设置动画

标记使用来自https://codepen.io/nucliweb/pen/ymedj 的代码作为参考。

我希望它们一个接一个地淡入。基本上是一个文本滑块。因此我尝试这样做，但不幸的是无法获得第四个

表现得像第一个 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。

您可以自己进行计算并编写详细的calcs 以提供更改的帧数，但最初的 8.3%（100%/3 的 25%）将变为 100%/4 的 25%（因为您现在有 4 个项目），或 6.25%。以此类推。

所以，

.item-1 { animation-name: anim-1; } .item-2 { animation-name: anim-2; } .item-3 { animation-name: anim-3; } .item-4 { animation-name: anim-4; } @keyframes anim-1 { /* first quarter: 0 … 100% / X */ 0%, 0% { opacity: 0; } 6.25%, 18.75% { opacity: 1; } /* 100% / 16 … 100% / 16 * 3 */ 25%, 100% { opacity: 0; } } @keyframes anim-2 { /* second quarter */ 0%, 25% { opacity: 0; } 31.25%, 43.75% { opacity: 1; } /* 100% / 16 * 5 … 100% / 16 * 7 */ 50%, 100% { opacity: 0; } } @keyframes anim-3 { /* third quarter */ 0%, 50% { opacity: 0; } 56.25%, 68.75% { opacity: 1; } /* 100% / 16 * 9 … 100% / 16 * 11 */ 75%, 100% { opacity: 0; } } @keyframes anim-4 { /* fourth quarter: 100% / X * (X-1) … 100% */ 0%, 75% { opacity: 0; } 81.25%, 93.75% { opacity: 1; } /* 100% / 16 * 13 … 100% / 16 * 15 */ 100%, 100% { opacity: 0; } }