CSS動畫關鍵幀重疊

Question

我根本不擅長CSS動畫。 我正在嘗試為4個文本元素設置動畫

標簽使用https://codepen.io/nucliweb/pen/ymedj中的代碼作為參考。

我希望他們彼此淡入淡出。 基本上是文本滑塊。 因此我嘗試這樣做，但不幸的是無法獲得第四名

表現得像第1個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％/ 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; } }