CODEWITHSUNDEEP
htmlcsscss-transitions
John
John

Reputation: 1797

Can't get timings right with transitions fade in and out

I can't seem to get the timings right on my transitions:

I want each item to nicely fade in, then stay visible for 5 seconds then nicely fade out to the next item, and repeat. And on an infinite loop (which is working)

@keyframes fadeinout {
  0% { opacity: 0; },
  6% { opacity: 1; },
  34% { opacity: 1; },
  40% { opacity: 0; }
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}

.e {
  opacity: 0;
  position: absolute;
}

.one {
  background: red;
  animation: fadeinout 3s infinite 1s;
}

.two {
  background: green;
  animation: fadeinout 3s infinite 2s;
}

.three {
  background: yellow;
  animation: fadeinout 3s infinite 3s;
}
<ul class="my-list">
  <li class="e one">item one</li>
  <li class="e two">item two</li>
  <li class="e three">item three</li>
</ul>

See this CodePen: https://codepen.io/pbul2004/pen/zYOjzRa

Upvotes: 0

Views: 49

Answers (1)

iguypouf
iguypouf

Reputation: 770

First include the "stay" mode in the keyframes so the element remains visible for 5 seconds, and secondly add 5 seconds of delay to each animation why applying animation property.

.e {
  opacity: 0;
  position: absolute;
}

@keyframes fadeinout {
  0%, 40% { opacity: 0; }
  6%, 34% { opacity: 1; }  /* "stay" mode */ 
}
.one {
  background:red;
  animation: fadeinout 15s infinite 1s;
}
.two {
  background:green;
  animation: fadeinout 15s infinite 6s; /* Offset */
}
.three {
  background:yellow;
  animation: fadeinout 15s infinite 11s; /* Offset */
}
<ul class="my-list">
  <li class="e one">item one</li>
  <li class="e two">item two</li>
  <li class="e three">item three</li>
</ul>

The visible mode of each item will come during the hidden mode of the two others. Once understood the idea, you can fine tune the durations and delays :) ( for instance I overlapped the fades on purpose )

Upvotes: 1

Related Questions